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 框的正则表达式
　　　　'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;
    }
}