1 表单验证的备选干活

  以打开长篇大论之前,首先以表单验证的效果亮给大家。

  jQuery 1  jQuery 2   jQuery 3

  1.点击表单项,显示帮助提示        
2.鼠标离开表单项时,开始校验元素   
 3.鼠标离开后底不易、错误提示和鼠标移入时的相助提醒

  对于新家而言,html表单验证是同码极其琐碎的业务。要搞好表单验证,需要准备以下基本要素:

  1.html表单结构:包含需要校验的表单元素;

  2.js逻辑控制:在得校验的表单元素上绑定事件,如点击、获取关节、失去焦点等事件,并安装这些事件对应之推行函数;

  3.css样式设置:针对急需校验的表单元素,需要装默认的开始样式,以及触发元素绑定事件后底变通样式。

  这3近乎基本要素中,html表单结构的创立相对简便易行。表单验证的首要以及难题在于如何用js及时得力地提醒用户有关表单操作的音信。这里自己参考了百渡过,163邮箱,京东齐名老牌互联网企业的登记页面,归纳出表单验证需要之要提示信息分类如下:

  1.表单元素获取关节后底扶信息(插件中对应class名”tip”);

  2.表单元素验证通过时的事业有成信息(插件中针对应class名”valid”);

  3.表单元素验证失败时之错误信息(插件中对应class名”error”)。

  如果不依靠其他插件,我们要花大量之时空去编写不同品类的信息提示,考虑各种体制间的往来切换,以及编写一些主干的验证规则。名言曰:”我所以看得重复远,是盖自站于巨人的肩上”。何不直接用部分早已部分成熟插件,来帮衬我们飞速的编写一个表单验证功能,这样既能够提高效率,又能够于咱抽出时间专注于我们温馨的逻辑。

  于广大表单验证插件中,jquery
validate插件是历史最悠久的jQuery插件之一,经过了大地范围外不同品种的认证。它的性状如下:

  1.放置验证规则:拥有必填、数字、email、url和信用卡号当内置验证规则;

  2.起定义说明规则:可以老方便地打定义说明规则(通过$.validator.addMethod(name,method,message)实现);

  3.简短强大的认证信息提醒:默认了验证信息提醒,并提供自定义覆盖默认信息提示的力量(通过安装插件中之message参数来贯彻);

  4.实时验证:可以由此keyup或blur事件触发验证,而不只在表单提交的时候证实。

  下面我们摘该插件,来落实一个粗略而好的表单验证例子。

2 jquery validate插件实现表单验证的小例子

  以引入jquery
validate插件前,需要先引入其所依之文书jquery.js(例子中jquery的本子为1.9);在落实的经过被,为了更好地效,我在jquery.validate.extend.js文件被针对jquery
validate原有的成效拓展了扩大,并修改了彼此关默认选项;因此于文档头部要引入的文件发出三单:

<script src="jquery.js"></script>
<script src="lib/jquery.validate.min.js"></script>
<script src="lib/jquery.validate.extend.js"></script>

2.1 表单html

  表单验证3要素吃,首先需要完成html表单结构代码的编辑。为了让表单结构简单而清丽,我们用表单的每个元素还打包在一个div结构中:用label标签用来标记元素的名号,接着便是表单元素本身。【注明:1.行使label标签的补益是啊鼠标用户改进了可用性。当以label元素内点击文本时,浏览器就是见面自动将焦点转至同label相关的表单控件上。2.每个需要校验的表单元素都应设置id和name属性,方便在使插件时以元素绑定校验规则及校验信息。】

  表单实现代码如下:

jQuery 4

jQuery 5

<form action="#" method="post" id="regForm">
    <fieldset>
        <legend>jquery-validate表单校验验证</legend>
        <div class="item">
            <label for="username" class="item-label">用户名:</label>
            <input type="text" id="username" name="username" class="item-text" placeholder="设置用户名"
            autocomplete="off" tip="请输入用户名">
        </div>
        <div class="item">
            <label for="password" class="item-label">密码:</label>
            <input type="password" id="password" name="password" class="item-text" placeholder="设置密码"
            tip="长度为6-16个字符">
        </div>
        <div class="item">
            <label for="password" class="item-label">确认密码:</label>
            <input type="password" name="repassword" class="item-text" placeholder="设置确认密码">
        </div>
        <div class="item">
            <label for="amt" class="item-label">金额:</label>
            <input type="text" id="amt" name="amt" class="item-text" placeholder="交易金额"
            tip="交易金额必须大于0,且最多有两位小数">
        </div>
        <div class="item">
            <input type="submit" value="提交" class="item-submit">
        </div>
    </fieldset>
</form>

jQuery 6

jQuery 7

2.2 表单验证js逻辑

  就我们通过js来贯彻对表单元素的校验。在校验之前,我本着jquery
validate插件进行了意义扩展,对默认的精选项进行了重写覆盖
。jquery
validate插件默认只供了校验正确和左时的唤醒,少我们常见的佑助信息提醒。为了化解这题目,我仔细研究了插件的源码,发现插件本身提供了onfocusin(校验元素得到焦点时调用)和onfocusout(校验元素失去焦点时调用)当下片个函数。通过改动默认参数的立即有限只接口,可以兑现党用户鼠标点击或选择素时(即元素得到焦点),提示救助信息;在用户鼠标离开元素时(即元素失去焦点),移除帮助信息。

  此外,jquery
validate默认提供表单元素输入时之实时校验,因为咱们要求以输入时止提示用户帮助信息,故待关闭输入的实时校验,为者我们用默认参数中之onkeyup设置为null。

  具体的扩展改进代码我放了新增js脚本jquery.validate.extend.js中,代码如下:  

jQuery 8

jQuery 9

/*******************************插件新功能-设置插件validator的默认参数*****************************************/
$.validator.setDefaults({
    /*关闭键盘输入时的实时校验*/
    onkeyup: null,
    /*添加校验成功后的执行函数--修改提示内容,并为正确提示信息添加新的样式(默认是valid)*/
    success: function(label){
        /*label的默认正确样式为valid,需要通过validClass来重置,否则这里添加的其他样式不能被清除*/
        label.text('').addClass('valid');
    },
    /*重写校验元素获得焦点后的执行函数--增加[1.光标移入元素时的帮助提示,2.校验元素的高亮显示]两个功能点*/
    onfocusin: function( element ) {
        this.lastActive = element;

        /*1.帮助提示功能*/
        this.addWrapper(this.errorsFor(element)).hide();
        var tip = $(element).attr('tip');
        if(tip && $(element).parent().children(".tip").length === 0){
            $(element).parent().append("<label class='tip'>" + tip + "</label>");
        }

        /*2.校验元素的高亮显示*/
        $(element).addClass('highlight');

        // Hide error label and remove error class on focus if enabled
        if ( this.settings.focusCleanup ) {
            if ( this.settings.unhighlight ) {
                this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
            }
            this.hideThese( this.errorsFor( element ) );
        }
    },
    /*重写校验元素焦点离开时的执行函数--移除[1.添加的帮助提示,2.校验元素的高亮显示]*/
    onfocusout: function( element ) {
        /*1.帮助提示信息移除*/
        $(element).parent().children(".tip").remove();

        /*2.校验元素高亮样式移除*/
        $(element).removeClass('highlight');

        /*3.替换下面注释的原始代码,任何时候光标离开元素都触发校验功能*/
        this.element( element );

        /*if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
            this.element( element );
        }*/
    }
});

jQuery 10

jQuery 11

  到插件的效益后,现在就是核心——使用插件为说明单元素绑定校验规则及校验信息。jquery
validate插件提供validate方法实现form表单的元素校验,该方式的参数是一个包含键值对的靶子。其中最为常用之键有rules(为歧因素定义校验规则),messages(为不同因素定义错误提示信息),success(校验正确后的字符串或者是推行函数)。常见的校验规则来:required(是否必填),minlength(最小尺寸),maxlength(最特别长),email(email格式规则),url(url格式规则),date(date格式规则),rangelength(给一定长度限制规则),equalTo(要求元素等另一元素例如equalsTo:”#password”)。下面的代码呈现了哪些对表单中之用户称、密码等字段绑定校验规则:

jQuery 12

jQuery 13

<script>
$(document).ready(function(){
    $("#regForm").validate({
        rules: {
            username:{
                required: true,
                minlength: 2
            },
            password:{
                required: true,
                minlength: 6,
                maxlength: 16
            },
            repassword:{
                required: true,
                equalTo: "#password"
            },
            amt: {
                required: true,
                amtCheck: true
            }
        },
        messages:{
            username:{
                required: "用户名不能为空",
                minlength: "用户名的最小长度为2"
            },
            password:{
                required: "密码不能为空",
                minlength: "密码长度不能少于6个字符",
                maxlength: "密码长度不能超过16个字符"
            },
            repassword:{
                required: "确认密码不能为空",
                equalTo: "确认密码和密码不一致"
            },
            amt: {
                required: "金额不能为空"
            }
        }
    });
});
</script>

jQuery 14

jQuery 15

2.3 表单验证css样式

  最后还要为页面元素添加css样式。插件中发生相同多样默认选项:其中默认错误显示标签为label,错误样式也label.error。上面在jquery.validate.extend.js文件中,有一个success函数需要验证一下。这个函数是于校验成功之早晚实施的,我们当函数中也label提示标签上加了校验正确对应的体裁label.valid。因此当css中设要美化信息提醒,需要针对label相关体如error,valid样式进行设计。此外我们以扩张插件功能受到补充加了一个class为tip的label标签,该标签只以校验元素得到焦点时变。为之,还用安装label的tip样式。

  完整的样式文件内容具体如下:

jQuery 16

jQuery 17

body{
    font-family: Microsoft Yahei;
    font-size: 15px;
}

fieldset{    width: 680px;    }

legend{    margin-left: 8px;    }

.item{
    height: 56px;
    line-height: 36px;
    margin: 10px;
}

.item .item-label{
    float: left;
    width: 80px;
    text-align: right;
}

.item-text{
    float: left;
    width: 244px;
    height: 16px;
    padding: 9px 25px 9px 5px;
    margin-left: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.item-select{
    float: left;
    height: 34px;
    border: 1px solid #ccc;
    margin-left: 10px;
    font-size: 14px;
    padding: 6px 0px;
}

.item-submit{
    margin-left: 88px;
}

input.error{
    border: 1px solid #E6594E;
}

input.highlight{
    border: 1px solid #7abd54;
}

label.error,label.tip{
    float: left;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    text-align: left;
    margin-left: 5px;
    padding-left: 20px;
    color: red;
    background: url('error.png') no-repeat left center;
}

label.tip{
    color: #aaa;
    background: url('tip.png') no-repeat left center;
}

label.valid{
    background: url('valid.png') no-repeat left center;
    width: 32px;
}

jQuery 18

jQuery 19

3 表单验证功能演示

  至此,表单校验的代码编写和插件的使已全完。在浏览器中运作代码,显示力量使下图:

  jQuery 20

  基本上满足现在多数网站表单验证的要求,如果要充实验证规则,只需要以jquery.validate.extend.js中多校验规则即可,例子如下:  

jQuery 21

jQuery 22

/*******************************插件字段校验*****************************************/
$.validator.addMethod(
    "amtCheck",
    function(value, element){
        /*var dotPos = value.indexOf('.');
        return value > 0 && dotPos < 0 && (dotPos > 0 && value.substring(dotPos + 1) <= 2);*/

        return value && /^\d*\.?\d{0,2}$/.test(value);
    },
    "金额必须大于0且小数位数不超过2位"
);

jQuery 23

jQuery 24

 

转载:https://www.cnblogs.com/Leo\_wl/p/4842827.html

相关文章

网站地图xml地图