js 表單驗證

標籤：

使用文檔：

請仔細閱讀後使用

首先要在頁面的頭部引入三個js 檔案：

<script src="js/jquery-1.12.2.min.js"></script><script src="js/jquery.form.js"></script><script src="js/RExp.js"></script>

jquery-1.12.2.min.js（這個不用說了）
jquery.form.js（這個js檔案在百度可以下載到）
RExp.js（這個 js 檔案下面會貼出來，有不懂的可以留言諮詢，或者加本人QQ172360937討論）

頁面配置應該這樣布：

<div id=‘div‘>    <form action="#" id="myform2">        <ul>            <li>                <input type="text" value=‘‘onkeyup= Pattern(this,/[\u4E00-\u9FA5]{2,4}/i)>                <span></span>            </li>            <li>                <input type="text" value=‘‘onkeyup= Pattern(this,/[\u4E00-\u9FA5]{2,4}/i)>                <span></span>            </li>            <li>                <input type="text" value=‘‘onkeyup= Pattern(this,/[\u4E00-\u9FA5]{2,4}/i)>                <span></span>            </li>            <li>                <input type="text" value=‘‘onkeyup= Pattern(this,/[\u4E00-\u9FA5]{2,4}/i)>                <span></span>            </li>            <li>                <input type="text" value=‘‘onkeyup= Pattern(this,/[\u4E00-\u9FA5]{2,4}/i)>                <span></span>            </li>            <li>                <select name="" id="">                    <option value="">11111</option>                    <option value="">22222</option>                </select>                <span></span>            </li>            <li>                <input type="button" value=‘提交‘ onclick = ‘RExp.Rsubmit(this);BtnSa()‘>            </li>        </ul>    </form>

 

1*,頁面配置：(重要)
　　每個表單要單獨放到一個 li 裡，每個 li 裡只允許有一個 span 標籤
2*,事件添加：
　　在要驗證的表單裡寫行內 onkeyup 事件傳入兩個參數 第一個參數是 this【必填】
第二個參數是此表單的正則表單式【選填】。非空可以不傳第二個參數，相對的函數也不用接收參數
3*,button事件：
　　form 表單裡的button按鈕應該這樣寫 ：

<input type="button" value=‘提交‘ onclick = ‘RExp.Rsubmit(this);BtnSa()‘>

不然會直接提交, 事件的寫法是固定的，函數的前後順序不要變，中間不要有空格，先執行第一個再執行第二個，或者可以擷取按鈕的 id 在頁面上添加點擊事件但是要保證先執行 RExp.Rsubmit(this) 方法
4*,提示資訊：
　　如果提示資訊不一樣，可以複製一份 Pattern()函數，修改函數名字，修改提示資訊即可.
5*,RExp.Rstyle 函數 ：
　　就像ajax一樣用哪個參數傳哪個參數。
6*,Pattern 函數書寫格式：
　　1-1：接收兩個參數，第一個參數必須寫，第二個參數不用就可以不寫

function Pattern(_this,exp){　　RExp.Rstyle({　　　　‘regular‘:exp,// -- 當前要驗證的 input 框的Regex　　　　‘trueText‘:‘* 正確‘, // -- 通過的提示文字　　　　‘falseText‘:‘* 姓名格式不正確‘, // -- 沒有通過的提示文字　　　　‘nullText‘:‘* 姓名不可為空‘, // -- 為空白的提示文字　　　　‘trueColor‘:‘green‘, // -- 驗證通過的提示文字顏色　　　　‘falseColor‘:‘orange‘, // -- 驗證沒有通過的提示文字顏色　　　　‘nullColor‘:‘red‘, // -- 為空白時的提示文字顏色　　　　‘This‘:_this　　});}

7*,提交表單的 ajax 寫法：
　　BtnSa()函數是提交按鈕點擊時觸發的函數只有表單裡的所有驗證都通過後RExp.Rtype 才會變為 true,其他情況 RExp.Rtype 都為false

function BtnSa(){　　if(RExp.Rtype){ // - 驗證通過後進來　　　　$(‘#myform2‘).ajaxSubmit({ // - button 按鈕對應的form 表單　　　　　　　　url: ‘package.json‘, // - 提交表單的地址　　　　　　　　type: ‘get‘, // - 提交方式　　　　　　　　dataType: ‘json‘, // - 資料格式　　　　　　　　success: function (data) { // - 成功函數　　　　　　　　　　alert(‘成功‘);　　　　　　　　},　　　　　　　　error:function(){ // - 失敗函數　　　　　　　　　　alert(‘失敗‘);　　　　　　　　}　　　　});　　}}

8*,不過這一切都是基於 jquery-1.12.2.min.js 和 jquery.form.js

以下是 RExp.js 代碼，（複製到你的 js 檔案裡，或者單獨引入都可以）

var RExp = {    // -- 此處動態改為 true 可以進入 ajax 提交form    Rtype:false,    // -- 全域 覺定是否提交表單    Roverall:0,    //  == 提交按鈕的事件    Rsubmit:function(_this){            this.Roverall = 0;            var inputSubmit = _this.form.getElementsByTagName("*");            for(var i = 0;i<inputSubmit.length-1;i++){                if(inputSubmit[i].onkeyup == undefined){                    this.Roverall ++;                }else{                    inputSubmit[i].onkeyup();                }            }            if(this.Roverall != inputSubmit.length-1){                this.Roverall = 0;                this.Rtype = false;            }else{                this.Rtype = true;            }    },    //  == 提示資訊樣式函數    Rstyle:function(){            var Span = arguments[0].This.parentNode.getElementsByTagName(‘span‘)[0];            if(arguments[0].This.value == ‘‘){                if(arguments[0].nullText != undefined){                    this.Rcomm({                        ‘span‘:Span,                        ‘Text‘:arguments[0].nullText,                        ‘Color‘:arguments[0].nullColor                    });                }                return;            }else if(arguments[0].regular == undefined){                this.Rcomm({                    ‘span‘:Span,                    ‘Text‘:arguments[0].trueText,                    ‘Color‘:arguments[0].trueColor                });                this.Roverall ++;            }            if(arguments[0].regular != undefined){                var type = arguments[0].regular.test(arguments[0].This.value);                if(type){                    if(arguments[0].trueText != undefined){                        this.Rcomm({                            ‘span‘:Span,                            ‘Text‘:arguments[0].trueText,                            ‘Color‘:arguments[0].trueColor                        });                    }                    this.Roverall ++;                }else{                    if(arguments[0].falseText != undefined){                        this.Rcomm({                            ‘span‘:Span,                            ‘Text‘:arguments[0].falseText,                            ‘Color‘:arguments[0].falseColor                        });                    }                }            }    },    // -- 公用方法    Rcomm:function(){            arguments[0].span.innerHTML = arguments[0].Text;            arguments[0].span.style.color = arguments[0].Color;    }}

 

js 表單驗證