Jquery表单验证插件validate

☆樱花仙子☆ 提交于 2020-02-08 03:26:21

写在前面:

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!