bob体育官方平台
JQuery validate插件验证客户注册消息_jquery_脚本之家

应用JQuery的validate插件做客商端验证特别便利,上面做叁个行使validate插件验证客户注册音讯的例子。

先天上学一下jQuery.Validate插件,为便于日后读书查看和大面积搜狐园友共享,特记于此。

本实例使用的是1.5版本

本博客转发自:jQuery Validate

演示是在SSH下做的,代码如下:


registe.jsp

jQuery Validate 插件为表单提供了强压的辨证效能,让顾客端表单验证变得更简明,同期提供了大气的定制选项,满足应用程序种种急需。该插件捆绑了黄金年代套卓有成效的评释办法,包罗U奥迪Q5L 和电子邮件验证,同一时候提供了一个用来编排顾客自定义方法的 API。全部的包扎形式暗中认可使用România语作为错误音讯,且已翻译成别的 37 种语言。

    注册页面    <!-- //&#25193;&#23637;validator&#30340;&#26657;&#39564;&#26041;&#27861; $.validator.addMethod("onlyLetterAndDigit",function(value, element, params){ var regex=new RegExp; return regex.test; },"&#21482;&#33021;&#36755;&#20837;&#23383;&#27597;&#25110;&#25968;&#23383;"); ${ $.validate({ //&#23450;&#20041;&#39564;&#35777;&#35268;&#21017;,&#20854;&#20013;&#23646;&#24615;&#21517;&#20026;&#34920;&#21333;&#30340;name&#23646;&#24615; rules:{ username:{ required:true, onlyLetterAndDigit:true,//&#20351;&#29992;&#33258;&#23450;&#20041;&#26041;&#27861;&#38480;&#21046;&#21482;&#33021;&#36755;&#20837;&#23383;&#27597;&#25110;&#25968;&#23383; rangelength:[4,20], remote:"registe!validName.action"//&#20351;&#29992;AJAX&#24322;&#27493;&#26657;&#39564; }, password:{ required:true, rangelength:[4,20] }, chkpassword:{ required:true, equalTo:"#password" }, email:{ required:true, email:true }, vercode:"required" }, messages:{ username:{ required:"&#35831;&#36755;&#20837;&#29992;&#25143;&#21517;", rangelength:"&#29992;&#25143;&#21517;&#38271;&#24230;&#24517;&#39035;&#22312;4&#65374;20&#20301;&#20043;&#38388;", remote:$.format }, password:{ required:"&#35831;&#36755;&#20837;&#23494;&#30721;", rangelength:"&#23494;&#30721;&#38271;&#24230;&#24517;&#39035;&#22312;4&#65374;20&#20301;&#20043;&#38388;" }, chkpassword:{ required:"&#35831;&#20877;&#27425;&#36755;&#20837;&#23494;&#30721;", equalTo:"&#23494;&#30721;&#36755;&#20837;&#19981;&#19968;&#33268;&#65292;&#35831;&#37325;&#26032;&#36755;&#20837;" }, email:{ required:"&#35831;&#36755;&#20837;&#30005;&#23376;&#37038;&#20214;", email:"&#35831;&#36755;&#20837;&#21512;&#27861;&#30340;&#30005;&#23376;&#37038;&#20214;" }, vercode:{ required:"&#35831;&#36755;&#20837;&#39564;&#35777;&#30721;" } } }); }); //&#21047;&#26032;&#39564;&#35777;&#30721; function refresh.src="authImg&#63;now="+new Date(); } // -->     

该插件是由 Jörn Zaefferer 编写和保险的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的严重性开拓职员,是 QUnit 的珍视职员。该插件在 二零零七 年 jQuery 开始年代的时候就曾经起来现出,并平素更新到现在。近年来版本是 1.13.1。

后台RegisteAction.java的主要方法

访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件。

public String execute() throws Exception { Map session = ActionContext.getContext; String ver2 =  session.get; session.put; //判断验证码是否正确 if  { if (userManager.validName { if (userManager.addUser(username, password, email) > 0) return SUCCESS; else addActionError; } else { addActionError; } } else { addActionError; } return INPUT; } //验证用户名是否可用 public String validName() throws Exception { System.out.println; boolean flag = userManager.validName; HttpServletResponse response = ServletActionContext.getResponse(); response.setDateHeader; response.addHeader; response.setHeader("Cache-Control", "no-cache"); response.setContentType("text/plain;charset=UTF-8"); if  response.getWriter; else response.getWriter; response.getWriter; // 因为直接输出内容而不经过jsp,因此返回null. return null; } 

注意:接收remote异步验证客商名的形式应该通过response.getWriter来输出,而无法像日常方法生龙活虎致重临字符串。

导入 js 库

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

有关插件更详尽的介绍能够查看“jQuery validate验证插件使用详整”。

暗中同意校验法规

图片 1

其它,jQuery也支撑动态给控件增多校验,比方:复制代码 代码如下:.rules("add", { required: true, email: true }卡塔尔(قطر‎; 但要静心:若是对聚集中的成分动态增加校验需求循环对每个成分增加,那是因为jQuery隐式达成了集聚操作,但validate插件没有。比如:

暗中认可提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    dateDE: "Bitte geben Sie ein gültiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: $.validator.format("Please enter no more than {0} characters."),
    minlength: $.validator.format("Please enter at least {0} characters."),
    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
    range: $.validator.format("Please enter a value between {0} and {1}."),
    max: $.validator.format("Please enter a value less than or equal to {0}."),
    min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

如须要改革,可在 js 代码中加入:

jQuery.extend(jQuery.validator.messages, {
    required: "必选字段",
    remote: "请修正该字段",
    email: "请输入正确格式的电子邮件",
    url: "请输入合法的网址",
    date: "请输入合法的日期",
    dateISO: "请输入合法的日期 (ISO).",
    number: "请输入合法的数字",
    digits: "只能输入整数",
    creditcard: "请输入合法的信用卡号",
    equalTo: "请再次输入相同的值",
    accept: "请输入拥有合法后缀名的字符串",
    maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
    minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
    rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
    range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
    max: jQuery.validator.format("请输入一个最大为{0} 的值"),
    min: jQuery.validator.format("请输入一个最小为{0} 的值")
});

推荐介绍做法,将此文件归入 messages_cn.js 中,在页面中引进:

<script src="../js/messages_cn.js" type="text/javascript"></script>
$.each.rules("add",{digits:true,required:true}); }); 

接纳办法

以上便是本文的全体内容,希望对大家的上学抱有利于。

1、将官和校官验法规写到控件中
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>

$().ready(function() {
 $("#signupForm").validate();
});


<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

使用 class="{}" 的措施,必得引入包:jquery.metadata.js。

能够采纳如下的方法,改良提醒内容:

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

在采用 equalTo 关键字时,前面包车型大巴内容必需抬高引号,代码如下所示:

class="{required:true,minlength:5,equalTo:'#password'}"
2、将官和校官验准则写到 js 代码中
$().ready(function() {
 $("#signupForm").validate({
        rules: {
   firstname: "required",
   email: {
    required: true,
    email: true
   },
   password: {
    required: true,
    minlength: 5
   },
   confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
   }
  },
        messages: {
   firstname: "请输入姓名",
   email: {
    required: "请输入Email地址",
    email: "请输入正确的email地址"
   },
   password: {
    required: "请输入密码",
    minlength: jQuery.format("密码不能小于{0}个字 符")
   },
   confirm_password: {
    required: "请输入确认密码",
    minlength: "确认密码不能小于5个字符",
    equalTo: "两次输入密码不一致不一致"
   }
  }
    });
});

messages 处,借使有个别控件未有 message,将调用默许的新闻。

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

required:true 必需有值。
required:"#aa:checked" 表明式的值为真,则要求注明。
required:function(卡塔尔(英语:State of Qatar){} 重回为真,表示必要表达。

末端二种常用于,表单中必要同一时间填或不填的要素。

常用方法及注意难题

返回顶部