validate针对checkbox、radio、select标签的验证

jquery.validate 是jquery的一个插件，用来辅助开发者在客户端方便快捷的实现表单验证，最终达到提高用户体验的目的。

示例代码

<form id="formLogin" method="post">  <div>    <label for="username">Username:</label>    <input type="text" id="username" name="username" />  </div>  <div>    <label for="password">password:</label>    <input type="text" id="password" name="password" />  </div>  <div>    <label for="password1">password1:</label>    <input type="text" id="password1" name="password1" />  </div>  <div>    <label for="sex">sex:</label>    <select id="sex" name="sex">      <option id="sexopt" value="" selected="selected">请选择</option>      <option id="sexnan" value="1">男</option>      <option id="sexnv" value="2">女</option>    </select>  </div>  <div>    <label for="favorite">level:</label>    <input type="checkbox" id="sport" name="favorite" value="sport" />sport    <input type="checkbox" id="write" name="favorite" value="write" />write  </div>  <div>    <label for="level">level:</label>    <input type="radio" id="one" name="level" value="one" />1    <input type="radio" id="two" name="level" value="two" />2  </div>  <div>    <input  id="submit" type="button" value="submit" />  </div></form>@section scripts{<script type="text/javascript" src="/content/home/index.js"></script>}

jquery.validate在定位html标签的时候，默认使用name属性来获取标签，所以需要开发者给需要进行验证的标签都加上name属性，并且赋值。

index.js

$().ready(function () {  $("#formLogin").validate({    rules: {      username: {        required: true      },      password: {        required: true      },      sex: {        required: true      },      level: {        required: true      },      favorite: {        required: true      }    },    messages: {      username: {        required: "please input username"      },      password: {        required: "please input password"      },      sex: {        required: "please select sex"      },      level: {        required: "level requred"      },      favorite: {        required: "favorite required"      }    },    errorPlacement: function (error, element) { //指定错误信息位置      if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox       var eid = element.attr('name'); //获取元素的name属性       error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面     } else {       error.insertAfter(element);     }   } });});$("#submit").click(function () {  $("#submit").submit();});

有时候我们需要使用正则表达式对一些输入进行验证，比如说邮箱，电话号码，或者是用户名必须字母开头并且长度要在5-30位，等等之类的。

jquery.validate默认没有提供正则表达式的验证，但是它提供了一个扩展，我们可以自己添加关于正则表达式的验证规则。

$(function () {    // 判断用户输入的value是否满足传入的正则params的规范    jQuery.validator.addMethod("pattern", function (value, element, params) {                                                                                                                                    if (!params.test(value)) {            return false;        }        return true;    });});

这样我们就可以像下面这样使用我们自定义的正则表达式验证了。

$().ready(function () {    $("#formLogin").validate({        rules: {                                                                                                                                tel: {                required:true,                pattern: /^[0-9]+$/            }        },        messages: {                                                                                                                                tel: {                required:'tel required',                pattern: "regex error"            }        }                                                                                                                    });});

怎么样，是不是很酷啊！

$("#formSupplier").validate还有一些其他的参数，跟多的参数可以查看

http://blog.csdn.net/a497785609/article/details/5758613

在这里先介绍两个比较常用的。

errorElement

错误提示的html标签

submitHandler

验证成功之后的操作

$("#formSupplier").validate({        errorElement: "span",                  submitHandler: function (form) {            if (btnType == 1) {                                  submitUpdateSupplier();            } else {                offShelf();            }        },        rules: {            txtSuUserName: {                required: true,                pattern: regexUsername            }        }，        messages: {            txtSuUserName: {                required: "请填写编号！",                pattern: "请注意，编号只能使用3-15位的字母组合！"            }        }});