及对其简单验证,jQuery验证控件jquery

2019-09-03 23:58栏目:Web前端

08         <input type="text" value="请输入您的邮箱" name="邮箱" id="email" class="inputs" /><span>*</span> 

复制代码 代码如下:

1.将官和校官验法规写到控件中

09     </p> 

demo下载地址:jQuery.plugin.formcheck
今日的课程就到此停止了。

</form>

07             element.onfocus = function() { 

先下页面代码:

万一一个页面中有多个表单都想设置成为debug,用

20         <input type="password" value="" name="密码" id="re_psw" class="inputs" /><span>*</span> 

复制代码 代码如下:

 

02     var forms = document.forms; 

(function ($) {
$.fn.formCheck = function (options) {
var defaults = {
errorClass: 'error'
};
var options = $.extend(defaults, options);
return this.each(function () {
var form = $(this);
//假诺不是from表单,间接再次来到不做其余操作
if (!form.is('form')) {
return;
}
//独有当form表单提交的时候,我们才做验证
form.submit(function () {
var errorFlag = false;
//获取表单里面有着的input控件,逐条开展拍卖
$(':input', this).each(function (index, item) {
//获取当前目的
var element = $(item);
//移除样式
element.removeClass(options.errorClass);
//必填项验证,value值无法为空
if (element.hasClass('required') && element.val().length == 0) {
errorFlag = true;
element.addClass(options.errorClass);
}
//数字证实
if (element.hasClass('number') && element.val().length > 0 && !/^d $/.test(element.val())) {
errorFlag = true;
element.addClass(options.errorClass);
}
//email验证
if (element.hasClass('email') && element.val().length > 0
                && !/^[a-zA-Z0-9._-] @[a-zA-Z0-9.-] .[a-zA-Z]{2,4}$/.test(element.val())) {
errorFlag = true;
element.addClass(options.errorClass);
}
//验证数字长度
var num = this.className.match(/min(d )/i);
if (num && element.val().length < num[1]) {
errorFlag = true;
element.addClass(options.errorClass);
}
});
return !errorFlag;
});
});
};
})(jQuery);

 

02     var labels = document.getElementsByTagName("label"); 

我们定义了一个form,定义了多少个输入框,请留神class属性,有的是class="required",表达该项是必填项;class="required email"表达该项是必填项,并且要求符合email格式。未有定义class的输入框不做表明。上面来看插件代码:

2.在messages_cn.js文件增添:isZipCode: "只可以包蕴中文字、阿拉伯语字母、数字和下划线",

24     </p> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.formCheck.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.formToCheck').formCheck();
});
</script>
<style type="text/css">
form
{
width: 300px;
}
label
{
position: absolute;
}
input:not(.submit), textarea
{
margin-left: 100px;
width: 200px;
}
.submit
{
margin-left: 100px;
}
.error
{
border:1px solid red;
}
</style>
</head>
<body>
<form class="formToCheck" id="formToCheck" method="get" action="#">
<fieldset>
<legend>a simple form</legend>
<p>
<label for="fname">
* first name</label>
<input id="fname" class="required" name="fname" />
</p>
<p>
<label for="lname">
last name</label>
<input id="lname" name="lname" />
</p>
<p>
<label for="email">
* email</label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="comment">
* comment</label>
<input id="comment" name="comment" class="required" />
</p>
<p>
<label for="email">
* email</label>
<input id="submit" type="submit" class="submit" value="submit" />
</p>
</fieldset>
</form>
</body>
</html>

  background:url("./demo/images/checked.gif") no-repeat 0px 0px;

08                 if (this.value == this.defaultValue) { 

您恐怕感兴趣的篇章:

  • jquery validate.js表单验证的中心用法入门
  • jquery表单验证使用插件formValidator
  • 依据Bootstrap jQuery.validate完毕Form表单验证
  • Jquery演习之表单验证达成代码
  • jQuery 表单验证插件formValidation实现特性化错误提醒
  • Jquery插件easyUi表单验证提交(示例代码)
  • jquery 达成表单验证效用代码(简洁)
  • jQuery完毕顾客注册的表单验证示例
  • jQuery表单验证插件formValidator(立异版)
  • jValidate 基于jQuery的表单验证插件
  • jquery 最简易易用的表单验证插件
  • jquery表单验证插件(jquery.validate.js)的3种采纳格局
  • jQuery表单验证轻松示例

    <td class="status"></td>

05     </p> 

 

17     </p> 

        submitHandler:function(form){

02     <p> 

    else

011     body { 

  }

09                     this.value = ""; 

长距离地址只好输出 "true" 或 "false",无法有别的输出

16         <input type="password" value="" name="密码" id="psw" class="inputs" /><span>*</span> 

   },

005 <style type="text/css"> 

label.checked {

...

加上"valid" 到表达元素, 在CSS中定义的体制<style>label.valid {}</style>

07             this.focus(); 

 

04         var id = labels[i].getAttribute("for"); 

    if ( element.is(":radio") )

009         padding:0; 

提出一般写在additional-methods.js文件中

03     for (var i=0; i<labels.length; i ) { 

 

016     .container { 

10radio和checkbox、select的验证

17         } 

        submitHandler:function(form){

04         <input type="text" value="请输入您的客商名" name="顾客名" id="user_name" class="inputs" /><span>*</span> 

jQuery.validator.addMethod("isZipCode", function(value, element) {   

06         element.onclick = function () { 

自定义说明格局

015     } 

    </p>

再来看HTML代码中,各样input成分大家都定义了三个暗中同意值,那样能够引导用户填写准确的音信。不过一样会变成叁个难为正是顾客要先把大家定义的暗中同意值删掉,然后再去填写自个儿的新闻。对于客商来评释确是不佳的经验。这里大家得以那样革新,当该因素获得大旨时,自动清除我们定义的私下认可值,失去大旨时,假使顾客什么都尚未输入,则又还原为暗中认可值。请看我们定义的resetFields()函数。
view sourceprint?01 function resetFields() { 

wrapper:String

06     <p> 

   password: {

16             } 

 

013         font-size:12px; 

    required: true,

请看完整代码示例1:
show sourceview sourceprint?001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; 

    <p>

05             var element = forms[i].elements[j]; 

    $("#reset").click(function() {

012         font-family:微软雅黑, verdana; 

 

10 }

 

15         <label for="psw">登陆密码:</label> 

 

06             if (element.type == "submit") continue; 

 

12         <input type="mobile_phone" value="请输入您的手提式有线电话机号" name="手提式有线电话机号" id="mobile_phone" class="inputs" /><span>*</span> 

        }    

19 }

    equalTo: "#password"

014         background-color:#EFFFDF; 

}, $.validator.format("请保管道输送入的值在{0}-{1}个字节之间(叁个华语字算2个字节)"));

12             element.onblur = function() { 

运用class="{}"的法子,必得引入包:jquery.metadata.js

19         <label for="re_psw">确认密码:</label> 

    </p>

09     } 

 

020     .header { 

 

22     <p> 

onclick:Boolean  Default: true 

022         padding-top:30px; 

 

13     </p> 

    required: true,

21     </p> 

 

08         } 

    <option value="b">Banana</option>

15                 } 

 

14                     this.value = this.defaultValue; 

errorClass:String  Default: "error" 

11         <label for="mobile_phone">手机号:</label> 

    <option value="p">Peach</option>

019     } 

 var validator = $("#signupForm").validate({

13                 if (this.value == "") { 

六合联盟,    });

03     for (var i=0; i<forms.length; i ) { 

   confirm_password: {

07         <label for="email">邮 箱:</label> 

   }

008         margin:0; 

用哪些标签标志错误,暗中同意的是label你能够改成em

03         <label for="user_name">用户名:</label> 

 

010     } 

 

018         margin:0 auto; 

   email: {

04         for (var j=0; j<forms[i].elements.length; j ) { 

});

021         height:35px; 

    var length = value.length;

003 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 

 

017         width:960px; 

   }  

10     <p> 

  <label for="confirm_password">确认密码</label>

023        

7验证的触及方式修改

004 <title>forms elements -- by zhangchen</title> 

errorContainer: "div.error",

006     /*--common style--*/ 

    <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>

18     <p> 

能够利用如下的点子,修改提醒内容:

23         <input type="submit" value="注册" class="btn" /> 

        <label for="firstname">Firstname</label>

18     } 

    </p>

14     <p> 

        <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>

10                 } 

remote:URL

11             } 

        validator.resetForm();

002 <html xmlns="; 

    <option value="a">Apple</option>

在web开垦中,平时索要客商填写部分音信交到到数据库中,这年大家就能够用到表单。对于前端来讲,表单设计的好与糟糕直接影响到顾客的心得。
在前几天的上学笔记中,和大家一块来先规划叁个表单,然后一步一步一类完善客户体验。
先看HTML代码:
view sourceprint?01 <form method="post" action="#" name="register"> 

    </td>

05         var element = document.getElementById(id); 

    dataType: "json",           //接受多少格式   

我们先来看代码中的"label"标签,当labels标签中的for属性值和input成分中的id值一样期,在前台页面中当大家点击元素的名号(文本)时,该因素就能被触发(获得主旨、选中)。那在表单成分可选区域相当小的时候越是起效果,举例单选开关、多选按键,供顾客点击的区域并十分小,假设设置了label,则顾客直接点击元素的名号时,就能够自行选中。所以设置label值还是很有含义的。
不过这么些效果实际不是全部的浏览器都援助。未有涉及,我们能够用一个轻便的js函数labelFocus()来兑现。
view sourceprint?01 function labelFocus() { 

        <input id="firstname" name="firstname" class="required" />

25 </form>

    minlength: 5

007     * { 

 

    });

        messages: {

 

 

 

 

    return this.optional(element) || (tel.test(value));

 

$().ready(function() {

    minlength: 5,

要验证的成分通过认证后的动作,假诺跟一个字符串,会作为贰个css类,也可跟多个函数

来得可能隐蔽验证消息,能够自行完成有错误消息出现时把容器属性改为呈现,无不当时遮盖,用处比一点都不大

 

<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />

 

 

 

    <td></td>

 </p>

        <label for="firstname">Firstname</label>

        rules: {

    type: "post",               //数据发送形式

 

select的minlength表示当选的比一点都不大个数(可多选的select),maxlength表示最大的选中个 数,rangelength:[2,3]表示当选个数区间

    required: "请输入Email地址",

 

 

如假使true那么当未通过认证的要素获得宗旨时,移除错误提示。幸免和 focusInvalid 一同用

 

 

9加多自定义校验

 </p>

 

   confirm_password: {

 

        <input class="submit" type="submit" value="Submit"/>

把错误消息统一放在一个容器里面。

   firstname: "required",

<script src="./js/jquery.metadata.js" type="text/javascript"></script>

        <div id="termswrap">

 

$().ready(function() {

});

</select>

 

 

<tr>

    <option value=""></option>

class="{required:true,minlength:5,equalTo:'#password'}"

    // set   as text for IE

    <p>

focusInvalid:Boolean  Default: true 

$.validator.setDefaults({

onsubmit:Boolean  Default: true 

</form>

    }

        }

  <input id="email" name="email" class="required email" />

1.要在additional-methods.js文件中丰盛也许在jquery.validate.js增添

    <p>

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">

            alert("submitted");   

    <option value="2">Baga</option>

   },

        }    

            <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>

 <p>

            <input id="terms" type="checkbox" name="terms" />

 </p>

 

 

 $(".selector").validate({     

jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {

 

    });

 

        <label id="ldateformat_am" for="dateformat_am">02/14/07</label>

 

 

 $("#signupForm").validate();

  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />

            length ;

 

   }

// 邮编验证   

});

// 粤语字四个字节

运用ajax方式开展表达,暗中认可会提交当前表明的值到长途地址,借使需求提交别的的值,能够选取data选项

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

<script src="../js/jquery.validate.js" type="text/javascript"></script>

4.退换错误新闻呈现的岗位

代码的效果是:一般情状下把错误音信呈现在<td class="status"></td>中,假若是radio展现在<td></td>中,如若是 checkbox呈现在剧情的末尾

    <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>

 

1.用其余措施替代暗中认可的SUBMIT

错过大旨是注明(不富含checkboxes/radio buttons)

 

   email: {

    </p>

  padding-bottom: 2px;

 </p>

<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />

  color: #EA5200;

 <p>

    });

付给时验证. 设置唯false就用别的艺术去注明

        <input id="dateformat_eu" name="dateformat" type="radio" value="0" />

 submitHandler: function(form) 

 

 

 

remote: {

后边二种常用于,表单中要求同时填或不填的要素

8异步验证

 <p>

 

    //label.addClass("valid").text("Ok!")

        </div>

 

errorContainer: "#messageBox1, #messageBox2"

});

}

 

        <input class="submit" type="submit" value="Submit"/>

</tr>

 

在动用equalTo关键字时,前边的从头到尾的经过必需抬高引号,如下代码:

 

 <p>

ignore: ".ignore"

}

指明错误放置的岗位,暗许情状是:error.appendTo(element.parent());即把错误音信放在验证的成分前边 

<form id="signupForm" method="get" action="">

success: "valid"

</tr>

 

 

<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />

诚如那多个属性同期使用,实现在八个器皿内呈现全数错误提醒的效果,而且没有音信时自动遮蔽

        username: function() {

 

$().ready(function() {

<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

 

        <input id="firstname" name="firstname" />

errorPlacement: function(error, element) {

 

focusCleanup:Boolean  Default: false 

上面包车型大巴就算是boolean型的,但提出独有要改为false,不然别乱增添。

//messages处,假使有些控件未有message,将调用暗中同意的消息

  <label for="confirm_password">确认密码</label>

 submitHandler: function(form) { alert("submitted!");form.submit(); }

$().ready(function() {

    label.html(" ").addClass("checked");

    required: "请输入确认密码",

在keyup时验证.

checkbox的minlength表示必需选中的矮小个数,maxlength表示最大的选中个数,rangelength:[2,3]表 示选中个数区间

    </td>

 

errorLabelContainer:Selector

只要想付出表单, 需要使用form.submit()而不用采纳$(form).submit()

//示例:

});

    });

success:String,Callback

<script src="../js/jquery.js" type="text/javascript"></script>

    email: true

}

remote: "check-email.php"

 

 

<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">

  <label for="email">E-Mail</label>

  <label for="email">E-Mail</label>

6各类字段验证通超过实际行函数

 

 

2.debug,只验证不提交表单

 

  <input id="confirm_password" name="confirm_password" type="password" />

errorElement:String  Default: "label" 

}

 

})

 

  <input id="password" name="password" type="password" />

  <input id="email" name="email" />

        }

        debug:true

   debug: true

 $("#signupForm").validate({

<input  type="radio" id="gender_female" value="f" name="gender"/>

 

    <p>

调用前要增多对additional-methods.js文件的援引。

在checkboxes 和 radio 点击时验证

 <p>

        error.appendTo( element.parent().next() );

errorPlacement: function(error, element) {  

}, "请准确填写您的邮编");

    required: "请输入密码",

    minlength: "确认密码不可能小于5个字符",

            return $("#username").val();

    url: "check-email.php",     //后台管理程序

 

$().ready(function() {

    email: "请输入准确的email地址"

能够设置validate的暗中同意值,写法如下:

 </p>

            form.submit();

});

    minlength: jQuery.format("密码不能够小于{0}个字 符")

}

<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

 

 

    <td class="label"> </td>

 })  

    data: {                     //要传送的多少

errorLabelContainer: $("#signupForm div.error"),

   {      

  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

            form.submit();

 

 

      $(form).ajaxSubmit();     

errorContainer:Selector 

<tr>

1.radio的required表示必得选中叁个

// 重新设置表单

    <option value="1">Buga</option>

 

 

    <td class="field" colspan="2">

    var tel = /^[0-9]{6}$/;

</select>

 

 

        error.appendTo( element.parent().next().next() );

5更换错误音讯突显的体制

</tr>

$.validator.setDefaults({

        error.appendTo ( element.next() );

    equalTo: "五次输入密码不等同不等同"

  font-weight: bold;

 

success: function(label) {

用哪些标签再把上边包车型地铁errorELement包起来

input.error { border: 1px solid red; }

 

    for(var i = 0; i < value.length; i ){

 <p>

script src=../js/jquery.js type=text/javascript/script script src=../js/jquery.validate.js type=text/javascript/script script src=./js/jquery.metada...

 $("#signupForm").validate({

 

addMethod:name, method, message

 

    <td style="padding-right: 5px;">

2.将官和校官验准则写到js代码中

        if(value.charCodeAt(i) > 127){

 

    error.appendTo(element.parent());  

 

            alert("submitted");   

    <option value="t">Turtle</option>

交由表单后,未通过认证的表单(第三个或提交以前获得主题的未通过验证的表单)会拿走核心

五、常用方法及注意难点

 

   firstname: "请输入姓名",

wrapper: "li"

 

设置错误提醒的体裁,能够扩充图标呈现,在该系统中一度确立了贰个validation.css特地用来掩护士学校验文件的体制

    <option value="3">Oi</option>

点名错误提示的css类名,能够自定义错误提示的体裁

<form id="signupForm" method="get" action="">

 

  <label for="password">Password</label>

2.checkbox的required表示必需选中

 

  <label for="password">Password</label>

errorPlacement:Callback 

 

 

 </p>

 

label.error {

 

 

    else if ( element.is(":checkbox") )

  return this.optional(element) || ( length >= param[0] && length <= param[1] );   

required:true 必需有值

3.ignore:忽略有些因素不表明

    required: true,

 Default: 把错误消息放在验证的因素前边 

onkeyup:Boolean  Default: true 

    </td>

required:"#aa:checked"表明式的值为真,则要求验证

 $("#signupForm").validate({

    }

onfocusout:Boolean  Default: true 

    <td style="padding-left: 5px;">

只要这一个参数为true,那么表单不会付出,只进行反省,调节和测量检验时相当惠及

  },

 

  padding-left: 16px;

   },

<tr>

 

   },

        <input id="dateformat_am" name="dateformat" type="radio" value="1"  />

   password: {

 

}

使用ajax方式

required:function(){}再次来到为真,表时要求证实

    3.select的required表示当选的value不能够为空

  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />

版权声明:本文由六合联盟发布于Web前端,转载请注明出处:及对其简单验证,jQuery验证控件jquery