欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP，暢享免費電子書(shū)等14項超值服

開(kāi)通VIP

首頁(yè)

好書(shū)

留言交流

下載APP

聯(lián)系客服
表單驗證方式的通用化
在上一篇“Web頁(yè)面表單域驗證方式的改進(jìn)“中，我們通過(guò)把驗證法則（正則表達式和是否必填字段）寫(xiě)在表單域中，將驗證過(guò)程和驗證法則成功的分離，從而減少了重復代碼，使驗證變得簡(jiǎn)單易行，在實(shí)際使用中，我們可以把驗證過(guò)程放在一個(gè)JS文件中，對于全輸入驗證界面，在頁(yè)面的表單驗證部分只需要調用其中的checkForm函數就能進(jìn)行有效驗證，頁(yè)面上不再需要書(shū)寫(xiě)重復性高的JS驗證代碼；對于復雜的表單，比如其中含有復選框或是需要兩個(gè)文本框比較的地方，這種方法也可讓你不寫(xiě)通用驗證代碼而把主要精力放在特殊的驗證上。這些能減輕不少工作量，讓繁瑣的工作變得輕松愉快起來(lái)。

下面我們看一看這種用法的實(shí)際使用。

首先，我們可以把驗證過(guò)程放在一個(gè)JS文件中，具體代碼如下：
formchecker.js
/**
* Check form
*/
function checkForm(vform){
    for(var i=0;i<vform.elements.length;i++){        
        if(vform.elements[i].type=="text"){
            var checkResult=checkTextBox(vform.elements[i]);
            var name=vform.elements[i].getAttribute("name");            
            
            if(checkResult){
                document.getElementById(name+"Msg").className="feedbackHide";
            }
            else{        
                document.getElementById(name+"Msg").className="feedbackShow";
                vform.elements[i].focus();
                return false;
            }                
        }
    }
 
    return true;
}

/**
* Check text field in the form
*/
function checkTextBox(vTextBox){
    var validChar=vTextBox.getAttribute("validChar");
    var isRequired=vTextBox.getAttribute("isRequired");
    var inputValue=vTextBox.value;
    
    if(isRequired!="true" && inputValue.length<1){
        return true;
    }
    else{
        var regexStr="^"+validChar+"$";
        var regex=new RegExp(regexStr);
        return regex.test(inputValue);
    }
}

/**
* Remove Extra Char in textbox
*/
function removeExtraChar(vTextBox,event){
    var maxlength=parseInt(vTextBox.getAttribute("maxlength"));
    var inputValue=vTextBox.value;
    
    if(inputValue.length>=maxlength){
        event.keyCode=9;
    }
}

下面想驗證一個(gè)用戶(hù)登錄頁(yè)面，它的頁(yè)面部分代碼如下：
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>"我的事務(wù)備忘錄"用戶(hù)登錄頁(yè)面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="web/js/ajax.js" type="text/javascript"></script>
<script src="web/js/formchecker.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
<div id="branding">
    <%
        String msg = (String) request.getAttribute("Msg");
        if (msg != null) {
            out.print(msg);
        }
    %>
    <!-- 外層表格，比內表格寬，以在左右留出一定空當 -->
    <table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="530" align="center" border="0">
        <tr bgcolor="#eaecf5" height="25">
        <td colspan=3> <font face=webdings color=#ff8c00>8</font><b> 用戶(hù)登錄:</b></td>
        </tr>
        <tr bgcolor=#236d78 height=1><td></td></tr>
        <tr bgcolor=#eaecf5 >
        <td bgcolor=#ffffff>
          <!-- 內置表格，居中,比外表格窄， -->
          <form action="UserLogin" onsubmit="return checkForm(this);">
          <table width=460 align=center border=0>
            <tbody>
              <tr>
                <td width=70>用戶(hù)名:</td>
                <td>
                    <input type="text" 
                           name="userName" 
                           validChar="[\u4E00-\u9FA5]{2,3}" 
                           isRequired="true" 
                           maxlength="8" 
                           onkeydown="removeExtraChar(this,event)" 
                           onfocus="this.style.backgroundColor='#e6e6e6'" 
                           onblur="this.style.backgroundColor='#ffffff'"/>
                    <font color=red> (必填)</font>
                    <span id="userNameMsg" class="feedbackHide">用戶(hù)名必須輸入兩到三位漢字</span>
                </td>
              </tr>
              <tr>
                <td width=70>密碼:</td>
                <td>
                    <input type="text" 
                           name="userPswd" 
                           validChar="\w+"  
                           isRequired="true" 
                           maxlength="8" 
                           onkeydown="removeExtraChar(this,event)" 
                           onfocus="this.style.backgroundColor='#e6e6e6'" 
                           onblur="this.style.backgroundColor='#ffffff'"/>
                    <font color=red> (必填)</font>
                    <span id="userPswdMsg" class="feedbackHide">密碼必須輸入英語(yǔ)或數字</span>
                </td>
              </tr>    
              <tr>
                <td></td>
                <td><input type="submit" value="登錄"/></td>
              </tr>
              <tr>
                <td colspan="2" align="center">如果沒(méi)有用戶(hù)請點(diǎn)擊這里<a href='ShowPage?page=register'>注冊</a></td>
              </tr>
            </tbody>          
          </table>
          </form>
          <!-- 內置表格結束-->
        </td> 
      </tr>
    </table>
    <!-- 外層表格結束 -->
<div>
</body>
</html>

請注意其中沒(méi)有任何頁(yè)面驗證的JS代碼，只有在表單驗證的地方調用formchecker.js中的函數。
<form action="UserLogin" onsubmit="return checkForm(this);">

不需要寫(xiě)JS代碼，只需要引入formchecker.js，就實(shí)現了表單的驗證，下面是驗證效果之一：



對于復雜一些的頁(yè)面，在formchecker.js的幫助下也能有效減少驗證代碼量，你只要書(shū)寫(xiě)一些特殊的通過(guò)validchar不能驗證的代碼即可，比如說(shuō)如下注冊頁(yè)面：


你只要書(shū)寫(xiě)兩次密碼比較的JS代碼，其它的還是可以讓checkForm函數幫你完成。具體代碼如下：
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>"我的事務(wù)備忘錄"用戶(hù)注冊頁(yè)面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="web/js/ajax.js" type="text/javascript"></script>
<script src="web/js/formchecker.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
<div>
<%
    String msg = (String) request.getAttribute("Msg");
    if (msg != null) {
        out.print(msg);
    }
%>
    <!-- 外層表格，比內表格寬，以在左右留出一定空當 -->
    <table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="530" align="center" border="0">
        <tr bgcolor="#eaecf5" height="25">
        <td colspan=3> <font face=webdings color=#ff8c00>8</font><b> 注冊個(gè)人用戶(hù)</b></td>
        </tr>
        <tr bgcolor=#236d78 height=1><td></td></tr>
        <tr bgcolor=#eaecf5 >
        <td bgcolor=#ffffff>
          <!-- 內置表格，居中,比外表格窄， -->
          <form action="UserRegister" onsubmit="return check(this);">
          <table width=460 align=center border=0>
            <tbody>
              <tr>
                <td width=70>用戶(hù)名:</td>
                <td>
                    <input type="text" 
                           name="userName" 
                           validChar="[\u4E00-\u9FA5]{2,3}" 
                           isRequired="true" 
                           onfocus="this.style.backgroundColor='#e6e6e6'" 
                           onblur="this.style.backgroundColor='#ffffff'"/>
                    <font color=red> (必填)</font>
                    <span id="userNameMsg" class="feedbackHide">用戶(hù)名必須輸入兩到三位漢字</span>
                </td>
              </tr>
              <tr>
                <td width=70>密碼:</td>
                <td>
                    <input type="text" 
                           name="userPswd" 
                           validChar="\w+"  
                           isRequired="true" 
                           onfocus="this.style.backgroundColor='#e6e6e6'" 
                           onblur="this.style.backgroundColor='#ffffff'"/>
                    <font color=red> (必填)</font>
                    <span id="userPswdMsg" class="feedbackHide">密碼必須輸入英語(yǔ)或數字</span>
                </td>
              </tr>   
              <tr>
                <td width=70>再次輸入密碼:</td>
                <td>
                    <input type="text" 
                           name="userPswd2" 
                           validChar="\w+"  
                           isRequired="true" 
                           onfocus="this.style.backgroundColor='#e6e6e6'" 
                           onblur="this.style.backgroundColor='#ffffff'"/>
                    <font color=red> (必填)</font>
                    <span id="userPswd2Msg" class="feedbackHide">密碼必須輸入英語(yǔ)或數字</span>
                </td>
              </tr>   
              <tr>
                <td></td>
                <td><input type="submit" value="注冊"/></td>
              </tr>
            </tbody>          
          </table>
          </form>
          <!-- 內置表格結束-->
        </td> 
      </tr>
    </table>
    <!-- 外層表格結束 -->
<div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--
function check(vform){
    // 先進(jìn)行文本框基本驗證
    if(checkForm(vform)==false){
        return false;
    }

    // 取得密碼
    var userPswd=$("userPswd").value;
    
    // 取得第二次密碼
    var userPswd2=$("userPswd2").value;
    
    // 檢查兩次密碼是否對應
    if(userPswd2!=userPswd){
        alert("兩次輸入的密碼不相同");
        $("userPswd2").focus();
        return false;
    }
    
    return true;
}
//-->
</script>


注意看上面的js代碼比常規方案減少了多少。

如果頁(yè)面上有其它控件如復選框，列表框等也可照此辦理，把文本框的通用驗證交給formchecker.js的checkForm和checkTextBox進(jìn)行，在頁(yè)面的js代碼中只寫(xiě)特殊的處理，這樣能減輕不少工作量，讓繁瑣的工作變得輕松愉快起來(lái)。
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。
打開(kāi)APP，閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
CSS控制表格隔行變色與鼠標滑過(guò)變色
JQuery基本過(guò)濾選擇器與表單對象過(guò)濾器
PHP登陸頁(yè)面完整代碼
CSS+JS控制表格行選中變色并儲存的代碼
JS抽獎程序代碼，轉盤(pán)抽獎
js+html實(shí)現的簡(jiǎn)單右鍵菜單
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導長(cháng)圖 關(guān)注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久