Validate验证框架经典大全

今天为咱们推荐二种JavaScript验证Email方法,希望对大家的就学抱有协理。
 第一种:javascript验证邮箱格式

jQuery校验官方网址地址:

小编做的流年的印证,格式是无需申明的,只须要注脚伊始日期与截至日期的大小,然而因为输入页面是批量的,並且每一行又是自动生成的,那样就不能够用id来作为参数,只可以用节点。那就给验证扩大了难度。

<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
else
alert("oh");
}
</SCRIPT>
<input type=text onblur=isEmail(this.value)>

一、导入js库

    以下是jsp页面包车型地铁片段:

第两种:用Javascript验证email填写是还是不是科学

<script type="text/javascript" src="<%=path%20%>/validate/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<%=path%20%>/validate/jquery.validate.min.js"></script>
<td><input id="warrantyStartDateStr" name="warrantyStartDateStr"        

 class="toolbar_button_input_80" type="Text" onClick="WdatePicker()"></td>
<td><input id="warrantyEndDateStr" name="warrantyEndDateStr" class="toolbar_button_input_80" type="Text" onClick="WdatePicker()" onBlur="checkDateOne(this)"></td>
<html>
<head>
<title>test</title>
<script language="javascript">
function emailCheck () {
var emailStr=document.all.form1.tel.value;
alert(emailStr);
var emailPat=/^(.+)@(.+)$/;
var matchArray=emailStr.match(emailPat);
if (matchArray==null) {
alert("电子邮件地址必须包括 ( @ 和 . )")
return false;
}
return true;
}
</script>
</head>

<body>
<form name="form1">
<input type="text" name="tel"/>
<input type="button" value="press" onclick="emailCheck()"/>
</form>



</body>
</html>

注:<%=request.getContextPath()
%>再次回到web项指标根路线。

而本身的js函数最后是这么写的:

第三种:js验证Email

二、暗中认可校验法则

  
js函数的指标正是不经过id,却能够得到五个input的value,即早先时间和终结时间,然后相比较五个时刻的大小。

function char_test(chr) 
//字符检测函数 
{ 
var i; 
var smallch="abcdefghijklmnopqrstuvwxyz"; 
var bigch="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
for(i=0;i<26;i++) 
if(chr==smallch.charAt(i) || chr==bigch.charAt(i)) 
 return(1); 
return(0); 
} 

function spchar_test(chr) 
//数字和特殊字符检测函数 
{ 
var i; 
var spch="_-.0123456789"; 
for (i=0;i<13;i++) 
 if(chr==spch.charAt(i)) 
 return(1); 
return(0); 
} 

function email_test(str) 
{ 
var i,flag=0; 
var at_symbol=0; 
//“@”检测的位置 
var dot_symbol=0; 
//“.”检测的位置 
if(char_test(str.charAt(0))==0 ) 
return (1); 
//首字符必须用字母 

for (i=1;i<str.length;i++) 
if(str.charAt(i)=='@') 
 { 
 at_symbol=i; 
 break; 
 } 
//检测“@”的位置 

if(at_symbol==str.length-1 || at_symbol==0) 
return(2); 
//没有邮件服务器域名 

if(at_symbol<3) 
return(3); 
//帐号少于三个字符 

if(at_symbol>19 ) 
return(4); 
//帐号多于十九个字符 

for(i=1;i<at_symbol;i++) 
if(char_test(str.charAt(i))==0 && spchar_test(str.charAt(i))==0) 
 return (5); 
for(i=at_symbol+1;i<str.length;i++) 
if(char_test(str.charAt(i))==0 && spchar_test(str.charAt(i))==0) 
 return (5); 
//不能用其它的特殊字符  

for(i=at_symbol+1;i<str.length;i++) 
if(str.charAt(i)=='.') dot_symbol=i; 
for(i=at_symbol+1;i<str.length;i++) 
if(dot_symbol==0 || dot_symbol==str.length-1) 
//简单的检测有没有“.”,以确定服务器名是否合法 
return (6); 

return (0); 
//邮件名合法 
}

(1)、required:true               必输字段
(2)、remote:”remote-valid.jsp”  
使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true                  必需输入准确格式的电子邮件
(4)、url:true                   
必须输入精确格式的网站
(5)、date:true                  
必需输入正确格式的日子,日期校验ie6出错,慎用
(6)、dateISO:true               
必得输入正确格式的日期(ISO),比方:二〇一〇-06-23,一九九六/0四分之一2
只验证格式,不表明有效性
(7)、number:true                 必得输入合法的数字(负数,小数)
(8)、digits:true                 必需输入整数
(9)、creditcard:true             必得输入合法的信用卡号
(10)、equalTo:”#password”        输入值必需和#password相同
(11)、accept:                   
输入具有合法后缀名的字符串(上传文件的后缀)
(12)、maxlength:5               
输入长度最多是5的字符串(汉字算贰个字符)
(13)、minlength:10              
输入长度最小是10的字符串(汉字算三个字符)
(14)、rangelength:[5,10]         输入长度必需介于 5 和 10
之间的字符串”)(汉字算叁个字符)
(15)、range:[5,10]               输入值必需介于 5 和 10 之间
(16)、max:5                      输入值不可能超出5
(17)、min:10                     输入值不能够小于10

function checkDateOne(inputsNode){
var p = inputsNode.parentNode; //取得input节点的父节点td
var preNode=p.previousSibling.firstChild;//取得td节点的前一个兄弟节点的第一个子结点
var startDate = document.getElementByIdx_x(preNode.id).value;
var endDate = document.getElementByIdx_x(inputsNode.id).value;      
if(startDate.length>0 && endDate.length>0){   
 var startTmp=startDate.split("-"); 
 var endTmp=endDate.split("-"); 
 var sd=new Date(startTmp[0],startTmp[1],startTmp[2]); 
 var ed=new Date(endTmp[0],endTmp[1],endTmp[2]); 
 if(sd.getDate()>=ed.getDate()){  
  alert("起始日期不能大于结束日期");   
   //return false;   
  }   
  }
 }

上述正是JavaScript验证Email方法,大家学会了啊?

三、暗许的升迁

首先是赢妥善前节点input节点的父节点p(即td节点),然后再获得父节点的上二个节点的率先身长结点input。那样就直达了指标。

您也许感兴趣的稿子:

  • JS表单验证方法实例小结【电话、居民身份证号、Email、普通话、特殊字符、身份ID号等】
  • JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,UCR-VL,日期等】
  • 使用js正则表明式验证手提式有线电电话机号,email地址,邮编
  • js数传闻明集结、js email验证、js
    url验证、js长度验证、js数字印证等简便包装
  • js验证email的正则
  • JavaScript中的E-mail
    地址格式验证
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}.")
},

     
这里想重申的是,不要遗忘td节点是input节点的父节点,不能够当成是它的男人节点。

如供给修改,可在js代码中投入:

除此以外还想说:previousSibling和nextSibling在IE和FF之间的差别:

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

  先来看一个事例:

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

<body>  
<div>  
<input id= "a4" type= "button" onclick= "alert(this.nextSibling);" value= "d" />  
<input id= "a5" type= "button" onclick= "alert(this.nextSibling);" value= "e" />  
</div>  
</body> 
<script type="text/javascript" src="<%=path%20%>/validate/messages_cn.js"></script>

     
该对象的组织表面上看,div的nextSibling独有2项——多个input节点。但实际有5项——/n,input,/n,input,/n。那是因为input作为创制各类表单输入控件的价签,无论是生成button、checkbox、radio…等或任何表单控件,IE都会自行在后边创造一个1字节位的空域。

四、使用办法

      
IE将跳过在节点之间时有产生的空格文书档案节点(如:换行字符),而Mozilla不会那样——FF会把诸如空格换行之类的排版成分视作节点读取,由此,在ie
中用nextSibling便可读取到的下一个节点成分,在FF中就需求那样写:nextSibling.nextSibling了。

1、metadata用法,将官和校官验准绳写到控件中

     previousSibling的作用恰恰相反,不过用法也是同一的道理!

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":"
      + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>jQuery Validate验证框架详解-metadata用法</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.metadata.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/validate/messages_zh.js"></script>
    <script type="text/javascript">
    $(function(){
      $("#myform").validate();
    });
    </script>
  </head>
  <body>
    <form id="myform" method="post" action="">
      <p>
        <label for="myname">用户名:</label>
        <!-- id和name最好同时写上 -->
        <input id="myname" name="myname" class="required" />
      </p>
      <p>
        <label for="email">E-Mail:</label>
        <input id="email" name="email" class="required email" />
      </p>
      <p>
        <label for="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>
        <label for="confirm_password">性别:</label>
        <!-- 表示必须选中一个 -->
        <input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
        <input type="radio" id="gender_female" value="f" name="gender"/>
      </p>
      <p>
        <label for="confirm_password">爱好:</label>
        <!-- checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间 -->
        <input type="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
        <input type="checkbox" id="spam_phone" value="phone" name="spam[]" />
        <input type="checkbox" id="spam_mail" value="mail" name="spam[]" />
      </p>
      <p>
        <label for="confirm_password">城市:</label>
        <select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
          <option value=""></option>
          <option value="1">厦门</option>
          <option value="2">泉州</option>
        <option value="3">Oi</option>
      </select>
      </p>
      <p>
        <input class="submit" type="submit" value="立即注册" />
      </p>
    </form>
  </body>
</html>

nextSibling和previousSibling介绍

图片 1

在FireFox中饱含众多空格作为文本节点,因而在我们运用nextSibling和previousSibling时就能够产出难题。因为FireFox会把文本节点误当做成分节点的小朋友节点来拍卖。大家能够拉长nodeType来剖断。当上一节点仍旧是下一节点为文本节点时,就一连查找,直到找到下一个因凉秋点。以下代码仅供参谋,在fireFox中测验通过:

使用class=”{}”的议程,必须引进包:jquery.metadata.js;

        //下一个兄弟节点
    function nextSibling(node) {
      var tempLast = node.parentNode.lastChild;
      if (node == tempLast) return null;
      var tempObj = node.nextSibling;
      while (tempObj.nodeType != 1 && tempObj.nextSibling != null) {
        tempObj = tempObj.nextSibling;
      }
      return (tempObj.nodeType==1)? tempObj:null;
    }
    //前一个兄弟节点
    function prevSibling(node) {
      var tempFirst = node.parentNode.firstChild;
      if (node == tempFirst) return null;
      var tempObj = node.previousSibling;
      while (tempObj.nodeType != 1 && tempObj.previousSibling != null) {
        tempObj = tempObj.previousSibling;
      }
      return (tempObj.nodeType==1)? tempObj:null;
    }  

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript" language="javascript" >
    window.onload = function () {
      var oUl = document.getElementsByTagName("UL");
      var nodeLi = oUl[0].childNodes[3];
      var nextListItem = nodeLi.nextSibling;
      var preListItem = nodeLi.previousSibling;
      alert(nextListItem.tagName + " " + preListItem.tagName);
      nextListItem = nextSibling(nodeLi);
      preListItem = prevSibling(nodeLi);
      alert(nextListItem.tagName + " " + preListItem.tagName);
    }
    //下一个兄弟节点
    function nextSibling(node) {
      var tempLast = node.parentNode.lastChild;
      if (node == tempLast) return null;
      var tempObj = node.nextSibling;
      while (tempObj.nodeType != 1 && tempObj.nextSibling != null) {
        tempObj = tempObj.nextSibling;
      }
      return (tempObj.nodeType==1)? tempObj:null;
    }
    //前一个兄弟节点
    function prevSibling(node) {
      var tempFirst = node.parentNode.firstChild;
      if (node == tempFirst) return null;
      var tempObj = node.previousSibling;
      while (tempObj.nodeType != 1 && tempObj.previousSibling != null) {
        tempObj = tempObj.previousSibling;
      }
      return (tempObj.nodeType==1)? tempObj:null;
    }  
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>JQuery</li>
      <li>Dom</li>
    </ul>
    <ul>
      <li>ASP.NET</li>
      <li>JSP</li>
      <li>PHP</li>
      <li>VB.NET</li>
    </ul>
  </div>
  </form>
</body>
</html>

可以运用如下的形式,修改提醒内容:class=”{required:true,minlength:5,messages:{required:’请输入内容’}}”;

其间nodeType的值重要有以下两种:

在行使equalTo关键字时,前边的内容必须抬高引号,如下代码:class=”{required:true,minlength:5,equalTo:’#password’}”。

要季秋点的nodeType值为1
特性节点的nodeType值为2
文本节点的nodeType值为3

2、将官和校官验准绳写到js代码中

你可能感兴趣的篇章:

  • nextSibling
  • 只好是字母或数字依然是字母和数字的三结合的正则previousSibling
  • javascript nextSibling 与 getNextElement(node)
    使用介绍
  • js
    nextSibling属性和previousSibling属性概述及应用注意
  • javascript中的nextSibling使用陷(da)阱(keng)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":"
      + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>jQuery Validate验证框架详解</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script>
    <script type="text/javascript">
    $(function(){
      var validate = $("#myform").validate({
        debug: true, //调试模式取消submit的默认提交功能  
        //errorClass: "label.error", //默认为错误的样式类为:error  
        focusInvalid: false, //当为false时,验证无效时,没有焦点响应 
        onkeyup: false,  
        submitHandler: function(form){  //表单提交句柄,为一回调函数,带一个参数:form  
          alert("提交表单");  
          form.submit();  //提交表单  
        },  
        rules:{
          myname:{
            required:true
          },
          email:{
            required:true,
            email:true
          },
          password:{
            required:true,
            rangelength:[3,10]
          },
          confirm_password:{
            equalTo:"#password"
          }          
        },
        messages:{
          myname:{
            required:"必填"
          },
          email:{
            required:"必填",
            email:"E-Mail格式不正确"
          },
          password:{
            required: "不能为空",
            rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
          },
          confirm_password:{
            equalTo:"两次密码输入不一致"
          }                  
        }
      });  
    });
    </script>
  </head>
  <body>
    <form id="myform" method="post" action="">
      <p>
        <label for="myname">用户名:</label>
        <!-- id和name最好同时写上 -->
        <input id="myname" name="myname" />
      </p>
      <p>
        <label for="email">E-Mail:</label>
        <input id="email" name="email" />
      </p>
      <p>
        <label for="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="立即注册" />
      </p>
    </form>
  </body>
</html>

图片 2

五、常用方法及注意难点

1、用任何方法代替暗中同意的submit

$(function(){
  $("#signupForm").validate({
    submitHandler:function(form){
      alert("submit!");  
      form.submit();
    }  
  });
});

能够安装validate的默许值,写法如下:

$.validator.setDefaults({
submitHandler: function(form) { alert("submit!"); form.submit(); }
});

要是想付出表单,需求使用form.submit(),而毫不使用$(form).submit()

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

即便那些参数为true,那么表单不会付出,只举行检查,调节和测量试验时十一分便利

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

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

$.validator.setDefaults({
debug: true
})

3、ignore:忽略有个别因素不表明

发表评论

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

标签:
网站地图xml地图