新浦京81707con > 功能介绍 > jQuery表单验证插件使用方法,class验证表单不为空

原标题:jQuery表单验证插件使用方法,class验证表单不为空

浏览次数:84 时间:2019-09-04

在付出种类时,往往都有一点表单数据为必填项,若用jQuery通过ID去印证,不仅仅会潜移默化作用,还有大概会怀有遗漏,不易于末日维护。

jquery 表单验证之通过 class验证表单不为空,jqueryclass

在支付种类时,往往都有有些表单数据为必填项,若用jQuery通过ID去申明,不仅仅会影响作用,还有大概会具有遗漏,不易于末日维护。

本章将介绍怎么着选拔jQuery,通过为表单配置class实行合併验证。(ID多少个页面只好够动用贰回;class能够一再援用)

1:为input增加class,名字能够随便安装,但各样input须求保持一致,本章案例calss设置为noNull。(若input已有class属性,可径直加到其后)

2:为input增添叁天性质,用来中期通过jquery获取该字段,用作提醒语。本章案例提醒属性为notNull。

3:通过jQuery遍历页面中负有calss为noNull的表单,验证其是不是为空,若为空,通过猎取notNull的字段,举办为空提醒。

切切实实怎么设置,请参见上边包车型大巴案例。本章针对input,radio,select,checkbox等等级次序都进展了阐释。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>
  <form>
      <!-- input -->
      <div>
        姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull"> 
      </div>
      <br>
      <!-- radio -->
      <div>
       性别:
       男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
       女<input type="radio" name="sex" value="1" >
      </div>
      <br>
      <!-- select -->
      <div>
        年龄:
        <select name="age" class="noNull" notNull="年龄">
          <option value ="">请选择</option>
          <option value ="1">1</option>
          <option value ="2">2</option>
        </select>
      </div>
      <br>
      <!-- checkbox -->
      <div>
        兴趣:
        打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">
        唱歌<input type="checkbox" name="hobby" value="2">
        跳舞<input type="checkbox" name="hobby" value="3">
      </div>
      <br>
     <button type="button" class="btn-c" onclick="bubmi()">保存</button>
  </form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
  $(".noNull").each(function(){
    var name = $(this).attr("name");
    if($(this).val()==""){
    alert($(this).attr('notNull') "不能为空");return false;
    }
    if($(this).attr("type")=="radio"){ 
      if ($("input[name='" name "']:checked").size() < 1){ 
        alert($(this).attr('notNull') "不能为空!"); 
        return false; 
      } 
    }
    if($(this).attr("type")=="checkbox"){ 
      if ($('input[name="' name '"]:checked').size() < 1){ 
        alert($(this).attr('notNull') "不能为空!"); 
        return false; 
      } 
    }    
  })  
}
</script>
</body>
</html>

上面给大家介绍jquery.validate.js验证插件

jquery.validate.js是jquery旗下的贰个说明插件,借助jquery的优势,我们能够连忙验证一些大面积的输入,并且能够团结壮大自身的表明措施。

举个例子,有像这种类型叁个表单:

<form id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required"/>
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>

在那一个表单中,闻明、姓、客户名、密码、确认密码和email。他们都为非空,何况电子邮件需倘使格式正确的地方、确认密码和密码一致。使用jQuery验证最简便易行的诀借使引入jquery.js和jquery validation.js三个js文件。然后分别在input中加入class即:

<input id="firstname" name="firstname" class="required"/>
<input id="lastname" name="lastname" class="required"/>
<input id="username" name="username" class="required"/>
<input id="password" name="password" type="password" class="required"/>
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>

以下列出validate自带的暗中认可验证

required: "必选字段",
remote: "请校对该字段",
email: "请输入精确格式的电子邮件",
url: "请输入合法的网站",
date: "请输入合法的日子",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只可以输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再度输入一样的值",
accept: "请输入具备合法后缀名的字符串",
maxlength: jQuery.format("请输入贰个长短最多是 {0} 的字符串"),
minlength: jQuery.format("请输入贰个尺寸最少是 {0} 的字符串"),
rangelength: jQuery.format("请输入叁个尺寸介于 {0} 和 {1} 之间的字符串"),
range: jQuery.format("请输入三个在乎 {0} 和 {1} 之间的值"),
max: jQuery.format("请输入一个最大为 {0} 的值"),
min: jQuery.format("请输入二个细小为 {0} 的值")

  然后,在document的read事件中,参与如下方法:

   <script>
    $(document).ready(function(){
        $("#signupForm").validate();
    }
   </script>

像这种类型,当form被提交的时候,就能够基于input内定的class来张开认证了。要是失利,form的付出就能够被阻挡。况兼,将提醒音讯展现在input的背后。

只是,这样感觉倒霉,因为证实法规侵入了我们的html代码。还应该有三个方法,便是选用“rules”。大家将input的这一个验证用class删除掉。然后修改document的ready事件响应代码:

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
}
});
})

这么的话,也能达到规定的规范平等的效果。

    那么,接下的题材,正是显得的荒谬提醒是暗中认可的。咱们供给使用自定义的提醒:

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:"必填项",
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

举个例子你还想在错误新闻上出示非常的体裁(譬喻字体为革命)即可通过增添:

<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>

继续丰裕对输入密码长度的表达准则:

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:{
required:"必填项",
minlength:jQuery.format("密码长度不少于{0}位"),
maxlength:jQuery.format("密码长度不超过{0}位")
},
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

使用remote

能够通过event钦赐触发效验情势(可选值有keyup(每一次开关时),blur(当控件失去主题时),不点名时就只在按提交开关时接触)

$(document).ready(function(){
$("#signupForm").validate({
event:"keyup" || "blur"
})
})

只要由此点名debug为true则表单不会提交只可以用来验证(默以为提交),可用来调治

$(document).ready(function(){
$("#signupForm").validate({
debug:true
})
})

假诺在付给前还亟需打开一些自定义管理利用submitHandler参数

$(document).ready(function(){
$("#signupForm").validate({
SubmitHandler:function(){
alert("success");
}
})
})

表单验证之通过 class验证表单不为空,jqueryclass 在开垦种类时,往往皆有有些表单数据为必填项,若用jQuery通过ID去注脚,不止会影响...

作用

本章将介绍如何运用jQuery,通过为表单配置class实行联合验证。(ID叁个页面只好够动用二遍;class能够频频援用)

jquery.validate是jquery旗下的一个认证框架,借助jquery的优势,咱们可以快捷验证一些周围的输入,何况能够团结扩展本人的表达办法,并且对国际化也许有很好的支持。

1:为input增添class,名字能够猖獗安装,但每一个input需求保持一致,本章案例calss设置为noNull。(若input已有class属性,可一贯加到其后)

利用前的布署

2:为input增多叁性情能,用来后期通过jquery获取该字段,用作提示语。本章案例提示属性为notNull。

说明:需要JQuery版本:1.2.6

3:通过jQuery遍历页面中享有calss为noNull的表单,验证其是不是为空,若为空,通过得到notNull的字段,举办为空提醒。

步骤:

现实怎样设置,请仿照效法下边包车型地铁案例。本章针对input,radio,select,checkbox等项目都开展了阐释。

要导入相应的jQuery.js与jquery.validate.js文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
</head>
<body>
  <form>
      <!-- input -->
      <div>
        姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull"> 
      </div>
      <br>
      <!-- radio -->
      <div>
       性别:
       男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
       女<input type="radio" name="sex" value="1" >
      </div>
      <br>
      <!-- select -->
      <div>
        年龄:
        <select name="age" class="noNull" notNull="年龄">
          <option value ="">请选择</option>
          <option value ="1">1</option>
          <option value ="2">2</option>
        </select>
      </div>
      <br>
      <!-- checkbox -->
      <div>
        兴趣:
        打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">
        唱歌<input type="checkbox" name="hobby" value="2">
        跳舞<input type="checkbox" name="hobby" value="3">
      </div>
      <br>
     <button type="button" class="btn-c" onclick="bubmi()">保存</button>
  </form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
  $(".noNull").each(function(){
    var name = $(this).attr("name");
    if($(this).val()==""){
    alert($(this).attr('notNull') "不能为空");return false;
    }
    if($(this).attr("type")=="radio"){ 
      if ($("input[name='" name "']:checked").size() < 1){ 
        alert($(this).attr('notNull') "不能为空!"); 
        return false; 
      } 
    }
    if($(this).attr("type")=="checkbox"){ 
      if ($('input[name="' name '"]:checked').size() < 1){ 
        alert($(this).attr('notNull') "不能为空!"); 
        return false; 
      } 
    }    
  })  
}
</script>
</body>
</html>

在相应的字段上钦赐验证法则
名称 *<input type="text" name="loginName" class="required">
中间class="required"代表本字段必要求输入数据

下边给大家介绍jquery.validate.js验证插件

点名要对表单进行验证
<script type="text/javascript">

jquery.validate.js是jquery旗下的二个注脚插件,借助jquery的优势,咱们得以比非常的慢验证一些常见的输入,並且能够团结扩张自身的表明措施。

$(function(){

比方,有这般二个表单:

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

<form id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required"/>
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>

});

在这几个表单中,有名、姓、客户名、密码、确认密码和email。他们都为非空,何况电子邮件需即便格式无误的地址、确认密码和密码一致。使用jQuery验证最简易的措施是引进jquery.js和jquery validation.js五个js文件。然后分别在input中步向class即:

</script>

<input id="firstname" name="firstname" class="required"/>
<input id="lastname" name="lastname" class="required"/>
<input id="username" name="username" class="required"/>
<input id="password" name="password" type="password" class="required"/>
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>

 

以下列出validate自带的暗中同意验证

成效如下图:

required: "必选字段",
remote: "请改正该字段",
email: "请输入准确格式的电子邮件",
url: "请输入合法的网站",
date: "请输入合法的日子",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只好输入整数",
creditcard: "请输入合法的银行卡号",
equalTo: "请再次输入一样的值",
accept: "请输入具有合法后缀名的字符串",
maxlength: jQuery.format("请输入四个尺寸最多是 {0} 的字符串"),
minlength: jQuery.format("请输入三个长度最少是 {0} 的字符串"),
rangelength: jQuery.format("请输入三个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.format("请输入多少个在于 {0} 和 {1} 之间的值"),
max: jQuery.format("请输入一个最大为 {0} 的值"),
min: jQuery.format("请输入多个相当的小为 {0} 的值")

 

  然后,在document的read事件中,参与如下方法:

 

   <script>
    $(document).ready(function(){
        $("#signupForm").validate();
    }
   </script>

 

诸有此类,当form被交给的时候,就能够依照input内定的class来拓宽认证了。假设失利,form的交付就能被堵住。而且,将提醒音信展现在input的末端。

 

不过,那样感到倒霉,因为证实法规侵入了小编们的html代码。还恐怕有四个艺术,正是应用“rules”。我们将input的这几个验证用class删除掉。然后修改document的ready事件响应代码:

 

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
}
});
})

 

这么以来,也能落得同样的效应。

 

    那么,接下的主题材料,便是显得的谬误提示是暗中认可的。大家需求使用自定义的唤起:

基础知识

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:"必填项",
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

钦定验证准绳的主意

一经您还想在错误新闻上显得特别的体制(举例字体为铅灰)就可以通过抬高:

把验证法则写到字段成分的class属性中

<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>

例:

持续丰硕对输入密码长度的认证法规:

名称 * <input type="text" name="loginName" class="required"><br>

$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:{
required:"必填项",
minlength:jQuery.format("密码长度不少于{0}位"),
maxlength:jQuery.format("密码长度不超过{0}位")
},
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})

密  *  <input type="password" name="password" class="required"><br>

使用remote

再度输入 <input type="password" name="password2"

能够由此event钦命触发效验情势(可选值有keyup(每一次按钮时),blur(当控件失去主题时),不指定时就只在按提交按键时接触)

class="{equalTo: '[name=password]'} required"><br>

$(document).ready(function(){
$("#signupForm").validate({
event:"keyup" || "blur"
})
})

生日   <input type="text" name="birthday" class="dateISO"><br>

要是因而点名debug为true则表单不会提交只好用来证实(默感到提交),可用来调度

E-mail *<input type="text" name="email" class="email"><br>

$(document).ready(function(){
$("#signupForm").validate({
debug:true
})
})

PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}">

如果在交付前还亟需张开部分自定义管理利用submitHandler参数

 

$(document).ready(function(){
$("#signupForm").validate({
SubmitHandler:function(){
alert("success");
}
})
})

说明:

您也许感兴趣的小说:

  • jquery点击退换class并toggle的兑今世码
  • jQuery完毕鼠标划过增多和删除class的艺术
  • jQuery相称文书档案链接并增添class的办法
  • jQuery修改class属性和CSS样式整理
  • jQuery 选取同期包罗八个class的成分的完成格局

一经应用class="{key:value,…}"的措施,必须引进:jquery.metadata.js

表单字段的name无法再一次,不然所安排的验证不起效用。

调用validate()方法时传递字段的表达法则

$(function() {

$("#testForm").validate({

rules: {

loginName:{

required: true,

minlength: 2

}   ,

password: {

本文由新浦京81707con发布于功能介绍,转载请注明出处:jQuery表单验证插件使用方法,class验证表单不为空

关键词: 新浦京81707con JavaScript/J

上一篇:js实现将选中内容分享到新浪或腾讯微博,js实现

下一篇:没有了