jQuery Validate表单验证插件完成代码

自家只提供了html结交涉js,样式你们根据自个儿的设计稿自身写,作者是分别给准确的时候和谬误的时候加了差别的class,用了不相同的可观,正确是惊人小,能够把提示的红字隐藏。

  在引入jquery
validate插件前,须要先引进它所依赖的文书jquery.js(例子中jquery的本子为壹.9);在落实的长河中,为了越来越好地成效,笔者在jquery.validate.extend.js文件中对jquery
validate原有的效应拓展了扩大,并修改了相关暗许选项;因此在文书档案底部必要引入的文书有八个:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>jquery validate验证</title>
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/jquery.validate.js"></script>
 <script type="text/javascript" src="js/additional-methods.js"></script>
 <script type="text/javascript">
 $(function(){
 //让当前表单调用validate方法,实现表单验证功能
 $("#ff").validate({
 debug:true, //调试模式,即使验证成功也不会跳转到目标页面
 onkeyup:null, //当丢失焦点时才触发验证请求
 rules:{ //配置验证规则,key就是被验证的dom对象,value就是调用验证的方法(也是json格式)
  sname:{
  required:true, //必填。如果验证方法不需要参数,则配置为true
  rangelength:[3,12],
  remote:{
  url:"ajax_check.action",
  type:"post"
  }
  },
  spass:{
  required:true,
  rangelength:[6,12]
  },
  spass2:{
  required:true,
  equalTo:'#spass' //表示和id="spass"的值相同
  },
  saddress:{
  required:true
  },
  semail:{
  required:true,
  email:true
  },
  simage:{
  required:true,
  extension:'gif|jpe?g|png'
  }
 },
 messages:{
  sname:{
  required:"请输入用户名",
  rangelength:$.validator.format("用户名长度在必须为:{0}-{1}之间"),
  remote:"该用户名已存在!"
  },
  spass:{
  required:"请输入密码",
  rangelength:$.validator.format("字段长度必须为:{0}-{1}之间")
  },
  spass2:{
  required:"请再次输入密码",
  equalTo:"两次密码必须一致" //表示和id="spass"的值相同
  },
  saddress:{
  required:"请选择地址"
  },
  semail:{
  required:"请填写邮件",
  email:"邮箱格式不正确"
  },
  simage:{
  required:"请选择要上传的头像",
  extension:"文件后缀名必须为jpg,jpeg,gif,png"
  }
 }
 });
 });
 </script>
 </head>

 <body>
 <!-- body中的内容不变,省略不写了 -->
 </body>
</html>

jQuery Validate表单验证插件达成代码,jqueryvalidate

 一 表单验证的筹划干活

  在开启大块文章之前,首先将表单验证的功用体现给大家。

图片 1  图片 2   图片 3

  1.点击表单项,呈现支持提醒        
2.鼠标离开表单项时,开首校验成分    
三.鼠标离开后的不利、错误提醒及鼠标移入时的援救提示

  对于初学者来讲,html表单验证是一项非常琐碎的作业。要搞好表单验证,需求计划以下基本要素:

  一.html表单结构:包涵要求校验的表单成分;

  2.js逻辑调节:在须要校验的表单成分上绑定事件,如点击、获取关节、失去大旨等事件,并安装这几个事件对应的奉行函数;

  3.css样式设置:针对供给校验的表单成分,供给设置默许的发轫样式,以及触发成分绑定事件后的转移样式。

  这3类基本要素中,html表单结构的开创相对简便易行。表单验证的显要和困难在于怎么样行使js及时有效地提醒用户有关表单操作的新闻。这里本身参谋了百度,163信箱,京东等知名网络集团的挂号页面,总结出表单验证必要的机要提醒音信分类如下:

  一.表单成分别获得取关节后的帮扶音讯(插件中对应class名”tip”);

  2.表单成分验证通过时的职业有成音讯(插件中对应class名”valid”);

  三.表单元素验证失败时的错误音讯(插件中对应class名”error”)。

  即使不借助于任何插件,我们须求开销大批量的年月去编写不一致类型的消息提示,思量各类体制间的往返切换,以及编写一些着力的求证规则。名言曰:”笔者因而看得更远,是因为自身站在圣人的肩膀上”。何不直接利用一些已有个别成熟插件,来帮忙我们相当慢的编辑撰写3个表单验证功用,这样既能提升功用,又能让大家抽取时间专注于大家本人的逻辑。

  在大多表单验证插件中,jQuery
validate插件是历史最久远的jQuery插件之一,经过了满世界范围内不一样门类的印证。它的表征如下:

  1.内置验证规则:具有必填、数字、email、url和信用卡号码等内置验证规则;

  2.自定义表明规则:能够很便宜地自定义表明规则(通过$.validator.addMethod(name,method,message)完结);

  3.简单的讲庞大的验证音讯提示:私下认可了印证消息提醒,并提供自定义覆盖暗中认可音讯提醒的效果(通过安装插件中的message参数来兑现);

  4.实时验证:能够透过keyup或blur事件触发验证,而不唯有在表单提交的时候证实。

  上面大家挑选该插件,来达成一个粗略而美好的表单验证例子。

二 jquery
validate插件达成表单验证的小例子

  在引进jquery
validate插件前,供给先引进它所依赖的文件jquery.js(例子中jquery的版本为一.玖);在贯彻的进程中,为了更加好地功用,笔者在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

  表单验证三要素中,首先必要做到html表单结构代码的编辑。为了让表单结构轻便而清晰,我们将表单的每种成分都卷入在1个div结构中:用label标签用来标识元素的名号,接着正是表单成分本身。【注解:一.行使label标签的益处是为鼠标用户创新了可用性。当在label元素内点击文本时,浏览器就能够自行将刀口转到和label相关的表单控件上。2.各种要求校验的表单成分都应当设置id和name属性,方便在应用插件时将成分绑定校验规则和校验音讯。】

  表单落成代码如下:

<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>

2.2 表单验证js逻辑

  接着大家因而js来促成对表单成分的校验。在校验在此以前,小编对jquery
validate插件实行了效率扩充,对暗许的选项进行了重写覆盖。jquery
validate插件默许只提供了校验正确及错误时的晋升,缺乏大家周围的协助音信提醒。为了缓慢解决这些难题,小编仔细琢磨了插件的源码,开掘插件自己提供了onfocusin(校验成分获得宗旨时调用)和onfocusout(校验成分失去主旨时调用)那多少个函数。通过修改暗中同意参数的那五个接口,能够兑现党用户鼠标点击或选择成分时(即成分获得大旨),提醒救助音信;在用户鼠标离开成分时(即成分失去核心),移除帮衬新闻。

  其它,jquery
validate暗中认可提供表单成分输入时的实时校验,因为我们渴求在输入时只提醒用户支持音讯,故须要关闭输入的实时校验,为此大家将暗中同意参数中的onkeyup设置为null。

  具体的增加革新代码笔者放到了新扩大js脚本jquery.validate.extend.js中,代码如下:  

/*******************************插件新功能-设置插件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
validate插件提供validate方法达成form表单的要素校验,该方法的参数是3个涵盖键值对的靶子。个中最常用的键有rules(为不一样因素定义校验规则),messages(为分化因素定义错误提醒消息),success(校验正确后的字符串或许是实行函数)。常见的校验规则有:required(是还是不是必填),minlength(最小长度),maxlength(最大尺寸),email(email格式规则),url(url格式规则),date(date格式规则),rangelength(给定长度限制规则),equalTo(供给成分等于另1成分比如equalsTo:”#password”)。上面包车型大巴代码显示了哪些对表单中的用户名、密码等字段绑定校验规则:

<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>

二.3 表单验证css样式

  最后还要为页面成分加多css样式。插件中有一雨后冬笋私下认可选项:个中暗中认可错误展现标签为label,错误样式为label.error。上边在jquery.validate.extend.js文件中,有三个success函数要求说美赞臣下。那个函数是在校验成功的时候施行的,大家在函数中为label提醒标签增多了校验正确对应的体裁label.valid。因而在css中假使要美化信息提示,需要对label相关体制如error,valid样式实行设计。其余大家在扩张插件成效中增添了一个class为tip的label标签,该标签仅在校验元素获得大旨时生成。为此,还亟需安装label的tip样式。

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

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;
}

3 表单验证成效演示

  至此,表单校验的代码编写和插件的应用已经整整做到。在浏览器中运转代码,呈现效果如下图:

图片 4

  基本上满意未来多数网址表单验证的渴求,假使急需充实表明规则,只须要在jquery.validate.extend.js中加进校验规则即可,例子如下:  

/*******************************插件字段校验*****************************************/
$.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
Validate表单验证插件达成代码,希望对我们享有支持,如若大家有任何疑问请给自身留言,我会及时恢复生机大家的。在此也特别感激大家对帮客之家网站的支撑!

Validate表单验证插件实当代码,jqueryvalidate 一 表单验证的预备职业在拉开大书特书在此之前,首先将表单验证的功力呈现给大家。 一.点击表…

//正则表达式已//双斜杠开始和结束,限制必须要以什么什么开头要在之前加^,限制必须要以什么什么结尾要在后面加$,例:/^正则$/
<script type="text/javascript">
  var reg = {
    user:/^[a-zA-Z]\w{4,9}$/,
    //用来判断用户名,第一位不能为数字,也就是小写字母或者大写字母,后面的内容\w表示字符(数字字母下划线)
    //要求是5-10位字符,所以出去第一位,还需要4-9位的\w
    pwd:/^[\da-zA-Z]{6,18}$/,
    //用来判断密码,html结构中要求是数字字符6到18位,\d表示数字
    tel:/^1[34578]\d{9}$/,
    //用来判断电话号码,通常手机号第一位为1,第二位只可能出现3.4.5.7.8,后面剩下的9位数字随机
    mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/,
    //用来判断邮箱,通常邮箱没有以0开头的,所以第一位为1-9数字或者小写字母或者大写字母,第二位开始任意字符
    //也可以只有第一位没有第二位,*表示至少0个,@后面同理,小写字母或者大写字母或者数字,.需要转意符,所以写成\.
    //点后面通常是com或者cn或者com.cn,所以是小写字母或者大写字母至少两位
    IDCard:/^[1-9]\d{16}[\dxX]$/,
    //用来判断身份证,通常第一位不为零,所以取1-9的数字,中间的16位数字随机,最后一位要么是数字要么是X
  };
  var arr = [
    document.getElementsByName('user')[0],
    document.getElementsByName('pwd')[0],
    document.getElementsByName('tel')[0],
    document.getElementsByName('mail')[0],
    document.getElementsByName('IDCard')[0]
  ];
  for(var i=0;i<arr.length;i++){
    arr[i].onblur = function(){
      if(this.value){
        if(reg[this.name].test(this.value)){
          this.parentNode.className = 'right';  //判断正确的时候加的class
        }else{
          this.parentNode.className = 'wrong';  //判断错误的时候加的class
          this.focus();
        };
      };
    }; 
  };
  var oTip = document.getElementById('tip');
  var opwd = document.getElementsByName('pwd2')[0];
  opwd.onfous = function(){
    if(!arr[1].value){
      arr[1].focus();
      oTip.className = 'show';
      setTimeout(function () {
        oTip.className = '';
      },1000);
    };
  };
  opwd.onblur = function(){
    if(this.value){
      if(this.value != arr[1].value){
        this.focus();
        this.parentNode.className ='wrong';
      }else{
       this.parentNode.className ='right';
      };
    };
  };
</script>

  具体的恢弘创新代码小编放到了新添js脚本jquery.validate.extend.js中,代码如下:  

图片 5

你恐怕感兴趣的小说:

  • 使用jquery正则表明式在页面验证url网站输入是还是不是科学
  • js正则表明式注册页面表单验证
  • Java使用正则表明式对注册页面进行表明作用完成
  • Python正则表达式相称HTML页面编码
  • 动态向页面增加控件和利用正则表达式的代码
  • 运用正则表明式验证登六页面输入是或不是符合供给

  一.点击表单项,展现帮助提醒        
2.鼠标离开表单项时,先导校验成分    
三.鼠标离开后的正确、错误提示及鼠标移入时的支援提醒

  addMethod表示新加的秘籍,第3个参数是措施名,第3个参数是函数体,第5个参数表示验证错误音讯。个中等学校函授数体中,又有七个参数,value代表验证的值,element代表最近dom对象,param表示参数。咱们使用正则表明式验证了手提式有线电话机号。这里就不测试了。最终大家来看一下终极的表单验证,终极验证表单须要充足CSS了,下边是完整的巅峰验证代码。

图片 6

  一.html表单结构:包罗必要校验的表单成分;

初稿地址:

js:

  三.表单成分验证战败时的错误音信(插件中对应class名”error”)。

陆. 兑现长途验证

html结构:

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

  大家来看,在sname里面新加了个remote方法,那个是用来远程验证的,参数url是要发送的央求Action,所以大家后台写个AjaxAction,在AjaxAction中写过check方法来,剖断用户名是不是为admin,假如是,则以流的样式重临false,前台接收到false就能够申明退步,再次来到true则表明成功。失败了则告诉用户该用户名已存在,后台Action这里就不写了,见笔者上传的源码就可以。大家来看下效果:

 一般做到登记页面包车型客车时候,当用户填完消息,都供给对他们的音讯举办表明,那就要用到正则表达式,具体看下边这么些事例。

  别的,jquery
validate私下认可提供表单成分输入时的实时校验,因为大家渴求在输入时只提醒用户协助新闻,故供给关闭输入的实时校验,为此大家将暗中认可参数中的onkeyup设置为null。

一. 写在前边

<div id="wrap">
  <h1>注册</h1>
  <div>
    <input type="text" class='match' name='user' placeholder='请输入用户名' />
    字母开头,长度5-10位字母数字下划线
  </div>
  <div>
    <input type="password" class='match' name='pwd' placeholder='请输入密码' />
    字母数字长度6-18位
  </div>
  <div>
    <input type="password" name='pwd2' placeholder='请再次输入密码' />
    两次密码不一致
  </div>
  <div>
    <input type="text" class='match' name="tel" placeholder='请输入电话' />
    电话号码格式不正确
  </div>
  <div>
    <input type="text" class='match' name="mail" placeholder='请输入e-mail' />
    邮箱格式不正确
  </div>
  <div>
    <input type="text" class='match' name="IDCard" placeholder='请输入身份证' />
    证件格式不正确
  </div>
  <div class='submit'>
    <input type="submit" value='注册' />
  </div>
  <p id='tip'>请先输入密码</p>
</div>
<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>

图片 7

如上所述是笔者给大家介绍的正则表明式进行页面表单验证效用,希望对大家持有补助,若是我们有其余疑问请给本人留言,笔者会及时过来我们的。在此也特别谢谢我们对台本之家网址的匡助!

  至此,表单校验的代码编写和插件的施用已经全副成就。在浏览器中运作代码,显示效果如下图:

肆. Validate基本方法的使用

功能图:(当用户填写的音讯不符合标准时呈现错误提醒)

  上边大家挑选该插件,来完结二个粗略而完美的表单验证例子。

伍. 贯彻错误新闻的本地化

如上所述是我给大家介绍的jQuery
Validate表单验证插件实今世码,希望对大家有着接济,假使大家有其余疑问请给笔者留言,作者会及时还原我们的。在此也特别感激大家对剧本之家网址的辅助!

8. 认证表单完整版

  二.js逻辑调整:在要求校验的表单成分上绑定事件,如点击、获取关节、失去主题等事件,并安装那些事件对应的进行函数;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>jquery validate验证</title>
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/jquery.validate.js"></script>
 <script type="text/javascript" src="js/additional-methods.js"></script>
 <script type="text/javascript">
 $(function(){
 //让当前表单调用validate方法,实现表单验证功能
 $("#ff").validate({
 debug:true, //调试模式,即使验证成功也不会跳转到目标页面
 rules:{ //配置验证规则,key就是被验证的dom对象,value就是调用验证的方法(也是json格式)
  sname:{
  required:true, //必填。如果验证方法不需要参数,则配置为true
  rangelength:[6,12]
  },
  spass:{
  required:true,
  rangelength:[6,12]
  },
  spass2:{
  required:true,
  equalTo:'#spass' //表示和id="spass"的值相同
  },
  slike:{
  required:true,
  },
  semail:{
  required:true,
  email:true
  },
  simage:{
  required:true,
  extension:'gif|jpe?g|png'
  }
 }
 });
 });
 </script>
 </head>

 <body>
 <!-- 
 <ul>
 <li>演示基本方法的使用</li>
 <li>jquery.validate.js中260行有缺省的验证配置</li>
 <li>jquery.validate.js中354行有验证方法出错的消息,即告诉我们都有哪些验证方法</li>
 </ul>
 -->
 <form id="ff" action="http://www.hao123.com" method="post">
 姓名:<input type="text" name="sname" /><br/>
 密码:<input type="password" name="spass" id="spass"/><br/>
 确认密码:<input type="password" name="spass2" /><br/>
 爱好:
 上网:<input type="checkbox" name="slike" value="上网"/>
 唱歌:<input type="checkbox" name="slike" value="唱歌"/>
 编程:<input type="checkbox" name="slike" value="编程"/>
 书法:<input type="checkbox" name="slike" value="书法"/><br/>
 邮箱:<input type="text" name="semail" /><br/>
 头像:<input type="file" name="simage" /><br/>
 <input type="submit" value="提交">
 </form>
 </body>
</html>

2.1 表单html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>jquery validate验证</title>
 <script type="text/javascript" src="jquery-1.11.1.js"></script>
 <script type="text/javascript" src="jquery.validate.js"></script>
 <script type="text/javascript" src="additional-methods.js"></script>
 <script type="text/javascript">
 $(function(){
 //让当前表单调用validate方法,实现表单验证功能
 $("#ff").validate({
 debug:true, //调试模式,即使验证成功也不会跳转到目标页面
 rules:{ //配置验证规则,key就是被验证的dom对象,value就是调用验证的方法(也是json格式)
  sname:{
  required:true, //必填。如果验证方法不需要参数,则配置为true
  rangelength:[6,12]
  },
  spass:{
  required:true,
  rangelength:[6,12]
  },
  spass2:{
  required:true,
  equalTo:'#spass' //表示和id="spass"的值相同
  },
  saddress:{
  required:true
  },
  semail:{
  required:true,
  email:true
  },
  simage:{
  required:true,
  extension:'gif|jpe?g|png'
  }
 },
 messages:{
  sname:{
  required:"请输入用户名",
  rangelength:$.validator.format("用户名长度在必须为:{0}-{1}之间")
  },
  spass:{
  required:"请输入密码",
  rangelength:$.validator.format("字段长度必须为:{0}-{1}之间")
  },
  spass2:{
  required:"请再次输入密码",
  equalTo:"两次密码必须一致" //表示和id="spass"的值相同
  },
  saddress:{
  required:"请选择地址"
  },
  semail:{
  required:"请填写邮件",
  email:"邮箱格式不正确"
  },
  simage:{
  required:"请选择要上传的头像",
  extension:"文件后缀名必须为jpg,jpeg,gif,png"
  }
 }
 });
 });
 </script>
 </head>

 <body>
 <!-- body中的内容不变,省略不写了 -->
 </body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图