提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JQuery表单验证插件jQuery.validate.js</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .myform{
            width:800px;
            margin:30px auto;
        }
        .myform legend{
            margin-left:30px;
        }
        p{
            margin:30px;
        }
        .side{
            text-align: center
        }
        em.success{
            color:green;
        }
        em.error{
            color:red;
        }
        /*还可以引入validation.css样式表,可以增加图标显示*/
    </style>
</head>
<body>
    <form class="myform" id="myForm" method="get" action="">
        <fieldset>
            <legend>注册账号</legend>  

            <p>
                <label for="username">用户名</label>
                <input type="text" id="username" name="username"/>
            </p>  

            <p>
                <label for="password">密码</label>
                <input type="password" id="password" name="password" value="" />
            </p>  

            <p>
                <label for="confirm_password">确认密码</label>
                <input type="password" id="confirm_password" name="confirm_password" value="" />
            </p> 

            <p>
                <label for="email">邮箱</label>
                <input id="email" name="email" class="required" />
            </p>

            <p>
                <label for="tel">手机号码</label>
                <input id="tel" name="tel"/>
            </p>  

            <p>
                <label for="url">项目链接</label>
                <input id="url" name="url" class="url"/>
            </p>  

            <p>
                <label for="code">验证码</label>
                <input id="code" name="code" class="num"/>
            </p>              

            <p>
                <label for="sex">性别</label>
                <select id="sex" name="sex">
                    <option value="0">男</option>
                    <option value="1" class="woman">女</option>
                </select>
            </p> 

            <p>
                <label for="">是否已婚</label>
                <label><input type="radio" value="0" name="married">是</label>
                <label><input type="radio" value="1" name="married">否</label>
                <label><input type="radio" value="2" name="married">离异</label>
            </p>     

            <p>
                <label for="">爱好</label>
                <label><input type="checkbox" name="hobby_0" value="0" class="travel">旅游</label>
                <label><input type="checkbox" name="hobby_1" value="1">睡觉</label>
                <label><input type="checkbox" name="hobby_2" value="2">上网</label>
                <label><input type="checkbox" name="hobby_3" value="3">看电影</label>
            </p>

            <p>
                <input type="submit" name="submit" value="提交" class="btn_submit"/>
            </p>
        </fieldset>
    </form>
    <p class="side">此处填写的内容可以用来判断是否刷新了页面<input type="text" /></p>
    <script type="text/javascript" src="jquery-1.12.0.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <!-- 引入支持固定格式解析的jQuery插件,可以将验证规则全部编写到class属性中,当然我还没试过,好不好用就不知道了 -->
    <script type="text/javascript" src="jquery.metadata.js"></script>
    <script type="text/javascript" >
        //DOM节点树生成后
        $(document).ready(function() {

            //配置参数,选择器里放id或者class名都可以
            $(".myform").validate({
//通过name属性来设置验证规则 rules: { username: { required:true, //也可以直接在标签里添加class="required" minlength:2 //设置最小长度 }, password: { required: true, minlength: 6 }, confirm_password: { required: true, minlength: 6, equalTo: "#password" //要求与指定元素的值相匹配 }, tel:{ number:true //也可以直接在标签里添加class="number" }, email:{ email:true //也可以直接在标签里添加class="email" }, url:"url", //可以直接在标签里添加class="url",也可以像上面一样改成{url:true} code:{ calculate:"1+1" } }, //通过name属性来设置验证提示信息的内容 messages: { username: { required:"用户名必填", minlength:"至少2个字符", }, password: { required: "请输入密码", minlength: "密码不能少于6个字符" }, confirm_password: { required: "请输入确认密码", minlength: "确认密码不能少于6个字符", equalTo: "密码输入不一致" }, tel:{ required:"请输入手机号码", number:"请输入数字" }, email:"请输入一个邮件地址", url:"请输入一个网址" }, //自定义一个提交方法 submitHandler: function(form) { alert("已经提交!"); // form.submit(); $(form).ajaxSubmit();//和上面一行的结果一样,页面会被刷新一遍,不想刷新就用$.ajax()或者插件自带的remote方法 }, //想要不提交表单,只进行验证 debug:true, //忽略某些元素不验证 ignore:".ignore", //指明错误放置的位置,默认是把错误信息放在验证的元素后面 errorPlacement:function(error,element){ element.siblings(".success").remove();//为了解决错误信息与正确信息同时出现的问题 if (element.is(":radio")){ error.appendTo(element.parent().next().next()); }else if (element.is(":checkbox")){ error.appendTo (element.next()); }else{ error.appendTo(element.parent()); } }, //自定义验证提示信息的统一标签、样式和内容 errorElement:"em", //使用什么标签再把上边的errorELement包起来 //wrapper:"div", //把错误信息统一放在一个容器里面 //errorLabelContainer:"#messageBox", //label指向上面那个提示信息标签em,注意设置类名为success的样式,如果是提示错误信息,直接改类名为error的样式 success:function(label){ label.siblings("em").remove();//为了解决"可以啦"三个字会在每次验证正确时叠加在后面的问题 label.text("可以啦").removeClass("error").addClass("success"); }, //显示总共有多少个未通过验证的元素,用的时候会出现把这些元素的错误信息给隐藏掉的问题 // showErrors:function(errorMap,errorList){ // console.log("有"+this.objectLength(this.invalid)+"个未通过验证的元素"); // }, //修改验证的触发方式,以下均是boolean型 onsubmit:true,//提交是验证,默认为true //以下参数虽然默认都是true,但其中有一些除非改为false,否则直接写true会报错 // onfocusout:true,//失去焦点是验证(不包括checkboxes/radio buttons) // onkeyup:true,//在keyup时验证 // onclick:true,//在checkboxes和radio点击时验证 // focusInvalid:true,//提交表单后,未通过验证的表单会获得焦点 focusCleanup:false,//如果是true那么当未通过验证的元素获得焦点时,移除错误提示同,这时要避免和 focusInvalid 一起用 //异步验证,即使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项 // remote: { // url: "check-email.php", //后台处理程序 // type: "post", //数据发送方式 // dataType: "json", //接受数据格式 // data: { //要传递的数据 // username: function() { // return $("#username").val(); // } // } // } }); //自定义一个验证方法,两个参数,一个是方法名,另一是回调函数,有三个参数,第一个是当前被验证元素的值 ,第二个是当前被验证的元素,第三个是传入的参数 $.validator.addMethod("calculate",function(val,ele,param){ return val==eval(param) //return this.optional(ele) || val==eval(param)//不要求值为必填,如果将||改成&&会出现问题 },"请正确输入数学公式计算后的结果"); //为一个单独的元素添加验证规则,前提是validate()方法必须首先被调用 $("#url").rules("add",{ required:true }); $("#tel").rules("add",{ required:".travel:checked"//当旅游这个复选框被选中的时,手机号码就变成必填,还可以接一个function(){},返回为真时需要验证 }) //检查是否验证通过 $(".btn_submit").on("click",function(){ console.log($(".myform").valid()); }) });     </script>   </body> </html>

关于radio和checkbox、select的验证,radio的required表示必须选中一个,checkbox的required表示必须选中,checkbox的 minlength 表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间,select 的 required 表示选中的 value不能为空,maxlength和rangelength:[2,3] 同上。

表单验证插件之jquery.validate.js的更多相关文章

  1. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  2. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

  3. 简单的表单验证插件(Jquery)

    在做web开发的时候经常遇到表单验证问题,表单验证一般有客户端验证和服务器端验证,这个验证插件仅仅能满足我的项目中的基本需求的. Validate_Tools.js function Validate ...

  4. 前端编程提高之旅(十)----表单验证插件与cookie插件

        实际项目开发中与用户交互的常见手法就是採用表单的形式.取得用户注冊.登录等信息.而当用户注冊或登录后又须要记住用户的登录状态.这就涉及到经常使用的两个操作:表单验证与cookie增删查找.   ...

  5. 表单验证插件-validator.js 使用教程

    做网站的时候,常常会涉及到各种表单验证.选择一款好用的表单验证插件,会降低表单验证开发的难度.在开发中,我目前使用的表单验证插件是:validator.js. validator.js 是一款轻量的表 ...

  6. jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  7. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  8. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  9. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

随机推荐

  1. SET NOCOUNT 怎么理解

    参考文章:http://www.cnblogs.com/si812cn/archive/2008/06/11/1217113.html 我简单的理解就是: 执行sql语句时 SET NOCOUNT O ...

  2. 搭建公司内部的NuGet Server

    随着公司业务慢慢的拓展,项目便会越来越来多,很多项目会依赖其他项目DLL,比如一些底层的技术框架DLL引用,还有各业务系统的也有可能会有引用的可能. 项目多,交叉引用多,如果要是有一个DLL更新,那就 ...

  3. C# - 多线程 之 信号系统

    基础概览 多线程之信号系统命名空间 using System.Threading; 线程同步类的继承层次关系图 终止状态和非终止状态 在终止状态下,被WaitOne()阻塞的线程会逐个得到释放.如果一 ...

  4. Linux Cmd Tool 系列之—alias

    The alias cmd list your current aliases. For example : alias Use alias to shorten a long cmd in curr ...

  5. phpexcel导出数据表格

    1.下载phpexcel(李昌辉) 2.在页面引入phpexcel的类文件,并且造该类的对象 include("../chajian/phpexcel/Classes/PHPExcel.ph ...

  6. java IO流详解

    流的概念和作用 学习Java IO,不得不提到的就是JavaIO流. 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输 ...

  7. 【Google Chrome】 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource问题解决

    问题??打开Google Chrome浏览器报错如下: 结论  浏览器出于安全性考虑,默认对跨域访问禁止 解决方法  给浏览器添加启动参数 --allow-file-access-from-files ...

  8. 《C#开发常用免费WebServices集合》

    天气预报 Web服务,数据来源于中国气象局 公用事业 http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 中国股票行情 分时走势预览 ...

  9. View and Data API Tips : Conversion between DbId and node

    By Daniel Du In View and Data client side API, The assets in the Autodesk Viewer have an object tree ...

  10. favicon.ico 404

    favicon.ico是一个图标文件.就是浏览网站时显示在地址栏的那个图标. 类似是百度的 显示在网站地址最前面的一张图片 可以在网站根目录(TOMCAT_HOME/webapps/ROOT/favi ...