表单验证form.js驱动模块的应用

本驱动模块需要桩模块中的ajax.js、stringLength.js、form.js支持。

页面中可以有n多个表单，但具体需要验证的文本框需要不同的data-role。例：<label><span>邮箱：</span><input type='text' value='邮箱' data-role='email'/></label>

下面是具体讲解

$(document).ready(function(){
    var modifyInfo = {
        formElements:[
            {
                name:'email',//验证文本框的data-role
                rules:[
                    {
                        rule:empty,//采用非空验证
                        law:'',//验证规则，因是非空验证故此处为空，但该参数必须写
                        tipw:'<div class=error data-role=emailpoint>邮箱不能为空</div>',//非空验证错误的提示内容。注：此处的data-role组成为'本文本框的data-role'+'point'
                        tipr:'<div class=error data-role=emailpoint>正确1</div>'//非空验证正确的提示内容。
                    },{
                        rule:regular,//正则验证
                        law:/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,
                        tipw:'<div class=error data-role=emailpoint>邮箱格式不正确,请检查</div>',
                        tipr:'<div class=error data-role=emailpoint>正确2</div>'
                    },{
                        rule:ajaxs,//ajax验证
                        io:'/form/post.php'//验证与后台交互的地址
                    }
                ],
                errors:[{
                    error_float_top : 2,//本文本框验证结果提示摆放的位置。桩模块已计算出本文本框top值，此处的数值为提示相对于文本框top相加的偏移量
                    error_float_left : 10//本文本框验证结果提示摆放的位置。相对于本文本框右侧边的偏移量
                }]
            },{
                name:'password',
                rules:[
                    {
                        rule:empty,
                        law:'',
                        tipw:'<div class=error data-role=passwordpoint>密码不能为空</div>',
                        tipr:'<div class=error data-role=passwordpoint>正确</div>'
                    },{
                        
                        rule:restriction,//字数限制验证
                        law:[3,21,'cn'],//3为最小字数；21为最大字数；'cn'为判断的方式，cn：中英文都算一个字符，en：中文两个字符英文一个字符
                        tipw:'<div class=error data-role=passwordpoint>密码在3-21之内</div>',
                        tipr:'<div class=error data-role=passwordpoint>正确</div>'
                    },{
                        rule:regular,
                        law:/^[A-Za-z\\d\\u4E00-\\u9FA5]+$/,
                        tipw:'<div class=error data-role=passwordpoint>昵称不能含有特殊字符</div>',
                        tipr:'<div class=error data-role=passwordpoint>正确</div>'
                    }
                ],
                errors:[{
                    error_float_top : 2,
                    error_float_left : 10
                }]
            },{
                name:'confirmpassword',
                rules:[
                    {
                        rule:confirm,//验证两个文本框值是否相同。
                        law:['password','value'],//'password'：需要验证标签的data-role；'value'：需要验证标签的取值点
                        tipw:'<div class=error data-role=confirmpasswordpoint>两次密码输入不一致</div>',
                        tipr:'<div class=error data-role=confirmpasswordpoint>正确</div>'
                    }
                ],
                errors:[{
                    error_float_top : 2,
                    error_float_left : 10
                }]
            },{
                name:'textarea',
                rules:[
                    {
                        rule:empty,
                        law:'',
                        tipw:'<div class=error data-role=textareapoint>内容不能为空</div>',
                        tipr:'<div class=error data-role=textareapoint>正确</div>'
                    },{
                        rule:restriction,
                        law:[0,140,'en'],
                        tipw:'<div class=error data-role=textareapoint>文字最多输入140个字</div>',
                        tipr:'<div class=error data-role=textareapoint>正确</div>'
                    }
                ],
                errors:[{
                    error_float_top : 2,
                    error_float_left : 10
                }]
            },
            {
                name:'Vemail',//第二个表单的email验证
                rules:[
                    {
                        rule:empty,
                        law:'',
                        tipw:'<div class=error data-role=Vemailpoint>邮箱不能为空<div>',
                        tipr:'<div class=error data-role=Vemailpoint>正确</div>'
                    },{
                        rule:regular,
                        law:/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,
                        tipw:'<div class=error data-role=Vemailpoint>邮箱格式不正确,请检查</div>',
                        tipr:'<div class=error data-role=Vemailpoint>正确</div>'
                    }
                ],
                errors:[{
                    error_float_top : 2,
                    error_float_left : 10
                }]
            }
        ],
       submitAction:[
            {
                name:'form01',//第一个form的data-role
                submitFunction:function(form){//第一个form验证结束后运行的function
                    $('body').css('background','#008800');
                }
            },{
                name:'form02',
                submitFunction:''//第二个form验证结束后运行的function。如果不需要另行执行其他动作，则表单会在验证全部正确的情况下提交表单
            }
       ]
    };
    
    //程序触发
    trigger(modifyInfo);
});

所需桩模块地址：

ajax.js : http://download.csdn.net/detail/anthen062/4301390

stringLength.js : http://download.csdn.net/detail/anthen062/4303479

form.js ： http://download.csdn.net/detail/anthen062/4303468