表单验证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