Jquery表单验证插件validate

写在前面：

　　在做一些添加功能的时候，表单的提交前的验证是必不可少的，jquery的validate插件就还可以，对于基本的需求已经够了。这里记录下基本的用法。

　　还是写个简单的demo吧

<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Jquery表单校验插件validate</title>
    <%--jqury插件--%>
    <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
    <%--validate插件--%>
    <script src="${baseURL}/ligerui/jquery-validation/jquery.validate.min.js"></script>
    <%--中文提示插件--%>
    <script src="${baseURL}/ligerui/jquery-validation/messages_cn.js" type="text/javascript"></script>
  </head>
  <body>
  <div >
    <form id="myform">
      <table>
        <tr>
          <td>
           ID
          </td>
          <td>
            <input type="text"  id="input_id" name="perCode" style="border:0.5px solid #fac090"/>
          </td>
        </tr>
        <tr>
          <td>
           Name
          </td>
          <td>
            <input type="text"  id="input_name" name="perName" style="border:0.5px solid #fac090"/>
          </td>
        </tr>
        <tr>
          <td>
            Role
          </td>
          <td>
            <select id="sel_role" name="role"  data-width="150px" style="">
              <option>工程师</option>
              <option>PM</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>性别</td>
          <td style="text-align: center"><input type="radio" name="sex" value="1" checked/>男 &nbsp&nbsp&nbsp<input type="radio" name="sex" value="0"/>女</td>
        </tr>
        <tr>
          <td>爱好</td>
          <td>
            <input type="checkbox" name="favorite" value="1" /> &nbsp;赚钱 &nbsp;&nbsp;
            <input type="checkbox" name="favorite" value="2"/> &nbsp;唱歌
            <input type="checkbox" name="favorite" value="3"/> &nbsp;游戏
          </td>
        </tr>
        <tr>
          <td>
            <input id="btn_commit" type="button" value="提交"/>
          </td>
        </tr>
      </table>
    </form>
  </div>
  </body>
<script>
    $(function(){
        //表单验证
        $("#btn_commit").click(function(){
            var myflag = $("#myform").validate({
                //onfocusout:true,// 是否在获取焦点时验证
                rules:{
                    //字段的name属性:"校验器"
                    perCode:"required",//required在此含义是必填
                    //字段的name属性:{校验器:值,校验器:值}
                    perName:"required",
                    role : "required",
                    sex:"required",
                    favorite:"required",
                },
                messages: { //自定义错误信息，
                    perName: {
                        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);
                    }
                    //错误信息提示颜色
                    error.css("color","red");
                },
            });
            if(!(myflag.form())){
                //表单校验不通过
                return ;
            }
            //表单校验通过 提交表单
            $.ajax(
                {
                    //...
                }
            );
        });
    });
</script>
</html>

　　jquery表单的验证还是比较简单的，这里的用法也只是简单的写了个demo，如果要验证radio与checkbox的时候，最好指定下错误信息出现的位置，比较好看点

　　主要的步骤：

　　1.导入jquery插件以及validate的相关插件

　　2.调用validate()方法，在里面编写对应的需要校验的字段，以及校验规则

　　其实网上的demo例子很多，也比我这个解释详细的多，这里只是简单的记录下，对于复杂的校验规则我这里也没有写出来，之后可以查阅相关的资料即可。

demo效果图：

Jquery表单验证插件validate

猜你喜欢