Jquery表单验证插件validate

2018-08-05 07:45:54来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

写在前面:

  在做一些添加功能的时候,表单的提交前的验证是必不可少的,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效果图:

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:69道Spring面试题和答案

下一篇:Kafka从入门到进阶