新闻资讯
记录首创点滴进步 见证远行
我们一直紧跟时代前沿,聚焦行业实时动态,发布公司最新资讯,欢迎您的关注
您目前的位置:网站首页 > 新闻资讯 > 网站常识 >

6.8日音讯,Validation范例及详解

发布日期:2013-06-08文章来源:首创网络浏览次数:736次
    6.8日音讯,Validation范例及详解。Validation在应用中还是非常好用的,目前来看,它的用法也是越来越普及,由于它的语法简单、操作效率高,现在已经延伸到网页制作的各个角落,在此邯郸网站建设首创网络小编给大家说一下......
    本文关键字:6.8日,音讯,Validation,范例,及,详解,6.8日,音讯,
   6.8日音讯,Validation范例及详解。Validation在应用中还是非常好用的,目前来看,它的用法也是越来越普及,由于它的语法简单、操作效率高,现在已经延伸到网页制作的各个角落,在此邯郸网站建设首创网络小编给大家说一下,它的用法和实际操作步骤,以供大家学习,查询。
 
  1/**
  2*@authorming
  3*/
  4$(document).ready(function(){
  5
  6/*设置默认属性*/
  7$.validator.setDefaults({
  8submitHandler:function(form){
  9form.submit();
  10}
  11});
  12
  13//字符验证
  14jQuery.validator.addMethod(“stringCheck“,function(value,element){
  15returnthis.optional(element)||/^[\u0391-\uFFE5\w]+$/.test(value);
  16},“只能包括中文字、英文字母、数字和下划线“);
  17
  18//中文字两个字节
  19jQuery.validator.addMethod(“byteRangeLength“,function(value,element,param){
  20varlength=value.length;
  21for(vari=0;i<value.length;i++){
  22if(value.charCodeAt(i)>127){
  23length++;
  24}
  25}
  26returnthis.optional(element)||(length>=param[0]&&length<=param[1]);
  27},“请确保输入的值在3-15个字节之间(一个中文字算2个字节)“);
  28
  29//身份证号码验证
  30jQuery.validator.addMethod(“isIdCardNo“,function(value,element){
  31returnthis.optional(element)||isIdCardNo(value);
  32},“请正确输入您的身份证号码“);
  33
  34//手机号码验证
  35jQuery.validator.addMethod(“isMobile“,function(value,element){
  36varlength=value.length;
  37varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
  38returnthis.optional(element)||(length==11&&mobile.test(value));
  39},“请正确填写您的手机号码“);
  40
  41//电话号码验证
  42jQuery.validator.addMethod(“isTel“,function(value,element){
  43vartel=/^\d{3,4}-?\d{7,9}$/;//电话号码格式010-12345678
  44returnthis.optional(element)||(tel.test(value));
  45},“请正确填写您的电话号码“);
  46
  47//联系电话(手机/电话皆可)验证
  48jQuery.validator.addMethod(“isPhone“,function(value,element){
  49varlength=value.length;
  50varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
  51vartel=/^\d{3,4}-?\d{7,9}$/;
  52returnthis.optional(element)||(tel.test(value)||mobile.test(value));
  53
  54},“请正确填写您的联系电话“);
  55
  56//邮政编码验证
  57jQuery.validator.addMethod(“isZipCode“,function(value,element){
  58vartel=/^[0-9]{6}$/;
  59returnthis.optional(element)||(tel.test(value));
  60},“请正确填写您的邮政编码“);
  61
  62//开始验证
  63$(‘#submitForm‘).validate({
  64/*设置验证规则*/
  65rules:{
  66username:{
  67required:true,
  68stringCheck:true,
  69byteRangeLength:[3,15]
  70},
  71email:{
  72required:true,
  73email:true
  74},
  75phone:{
  76required:true,
  77isPhone:true
  78},
  79address:{
  80required:true,
  81stringCheck:true,
  82byteRangeLength:[3,100]
  83}
  84},
  85
  86/*设置错误信息*/
  87messages:{
  88username:{
  89required:“请填写用户名“,
  90stringCheck:“用户名只能包括中文字、英文字母、数字和下划线“,
  91byteRangeLength:“用户名必须在3-15个字符之间(一个中文字算2个字符)“
  92},
  93email:{
  94required:“请输入一个Email地址“,
  95email:“请输入一个有效的Email地址“
  96},
  97phone:{
  98required:“请输入您的联系电话“,
  99isPhone:“请输入一个有效的联系电话“
  100},
  101address:{
  102required:“请输入您的联系地址“,
  103stringCheck:“请正确输入您的联系地址“,
  104byteRangeLength:“请详实您的联系地址以便于我们联系您“
  105}
  106},
  107
  108/*设置验证触发事件*/
  109focusInvalid:false,
  110onkeyup:false,
  111
  112/*设置错误信息提示DOM*/
  113errorPlacement:function(error,element){
  114error.appendTo(element.parent());
  115},
  116
  117});
  118
  119});
  测试页index.html
 
  7<scriptsrc=”lib/jquery/jquery-1.3.2.min.js”></script>
  8<scripttype=”text/javascript”src=”lib/jquery/jquery.validate.js”mce_src=”lib/jquery/jquery.validate.js”></script>
  9<scripttype=”text/javascript”src=”lib/jquery/messages_cn.js”></script>
  10<scripttype=”text/javascript”src=”lib/jquery/formValidatorClass.js”></script>
  11<styletype=”text/css”>
  12
  13*{
  14font-family:Verdana;
  15font-size:96%;
  16}
  17label{
  18width:10em;
  19float:left;
  20}
  21label.error{
  22float:none;
  23color:red;
  24padding-left:.5em;
  25vertical-align:top;
  26}
  27p{
  28clear:both;
  29}
  30.submit{
  31margin-left:12em;
  32}
  33em{
  34font-weight:bold;
  35padding-right:1em;
  36vertical-align:top;
  37}
  38
  39</style>
  40</head>
  41<body>
  42<formclass=”submitForm”id=”submitForm”method=”get”action=”">
  43<fieldset>
  44<legend>表单验证</legend>
  45<p>
  46<labelfor=”username”>用户名</label>
  47<em>*</em><inputid=”userName”name=”username”size=”25″/>
  48</p>
  49<p>
  50<labelfor=”email”>E-Mail</label>
  51<em>*</em><inputid=”email”name=”email”size=”25″/>
  52</p>
  53<p>
  54<labelfor=”phone”>联系电话</label>
  55<em>*</em><inputid=”phone”name=”phone”size=”25″value=”"/>
  56</p>
  57<p>
  58<labelfor=”address”>地址</label>
  59<em>*</em><inputid=”address”name=”address”size=”22″>
  60</p>
  61<inputclass=”submit”type=”submit”value=”提交”/>
  62</p>
  在实际的用法当中,可能会有各种更好的用法,只要大家不断的实践,勇于创新,把新的知识巩固和学习好,相信新的用法也是在不知不觉中得出来。
    本文由邯郸网络公司首创网络整理编辑发布,请勿转载、复制、摘抄等!

+ 查看更多我们的客户 / Our client

0310-4559740
400-990-1661
    24小时报务热线
    18931045623
在线客服
首创网络邯郸公司
邯郸公司
电话:0310-4559740 / 18931045623  地址:邯郸市丛台区颐高广场B座13层1304室