此文在jquery的验证插件(下文以jquery代替)和validform验证插件之间作如下对比:1、样式2、普通验证:3、自定义验证:4、Ajax验证:一、样式1、Jquery(可自定义提示信息样式,下图摘自官方文档):2、Validform(提供七种内置方案并支持自定义,以下为七种内置的较常用的三种):二、普通验证1、Jquery:Jquery支持两种方式验证:1、直接将规则绑定到元素上。
2、将规则写在初始化js 中1、直接将规则绑定到元素上。
<form class="cmxform" id="form2" method="get" action=""><fieldset><legend>验证一个完整的表单</legend><p><label for="email">Email</label><input id="email" name="email" required type="email"></p><p><label for="agree">喜欢的颜色</label><select id="color" name="color" title="请选择您喜欢的颜色!" required><option></option><option>红色</option><option>蓝色</option><option>黄色</option></select></p><p><label for="phone">电话</label><input id="phone" name="phone" required type="number" rangelength="[2,8]"> </p><p><label for="address">地址</label><input id="address" name="address" required minlength="3"></p><p><label for="avatar">头像</label><input type="file" id="avatar" name="avatar" required></p><p><label for="agree">请同意我们的条款</label><input type="checkbox" class="checkbox" id="agree" title="请同意我们的条款!" name="agree" required></p><p><input class="submit" type="submit" value="提交"/><input class="cancel" type="submit" value="取消"/></p></fieldset></form>2、将规则下载初始化js中$().ready(function() {$("#signupForm").validate({rules: {firstname: "required",email: {required: true,email: true},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"}},messages: {firstname: "请输入姓名",email: {required: "请输入Email地址",email: "请输入正确的email地址"},password: {required: "请输入密码",minlength: jQuery.format("密码不能小于{0}个字符")},confirm_password: {required: "请输入确认密码",minlength: "确认密码不能小于5个字符",equalTo: "两次输入密码不一致不一致"}}});});2、Validform:Validform也支持两种:1、直接将规则绑定到元素上。
2、将规则写在初始化js中1、直接将规则绑定到元素上<!--密码--><input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间!" /><!--确认密码--><input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致!" /><!--默认提示文字--><textarea tip="请在这里输入您的意见。
" errormsg="很感谢您花费宝贵时间给我们提供反馈,请填写有效内容!" datatype="s" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。
</textarea><!--使用swfupload插件--><input type="text" plugin="swfupload" class="inputxt" disabled="disabled" value=""><input type="hidden" value="" pluginhidden="swfupload"><!--使用passwordStrength插件--><input type="password" errormsg="密码至少6个字符,最多18个字符!" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="password" value=""><div class="passwordStrength" style="display:none;"><b>密码强度:</b> <span>弱</span><span>中</span><span class="last">强</span></div><!--使用DatePicker插件--><input type="text" plugin="datepicker" class="inputxt" name="birthday" value="">2、将规则写在初始化js中demo.addRule([{ele:"#name",datatype:"s6-18",ajaxurl:"valid.php",nullmsg:"请输入昵称!",errormsg:"昵称至少6个字符,最多18个字符!"},{ele:"#userpassword",datatype:"*6-16",nullmsg:"请设置密码!",errormsg:"密码范围在6~16位之间!"},{ele:"#userpassword2",datatype:"*",recheck:"userpassword",nullmsg:"请再输入一次密码!",errormsg:"您两次输入的账号密码不一致!"}]);三、自定义验证1、Jquery:addMethod(name,method,message)方法参数name 是添加的方法的名字。