jQuery基于正则表达式的表单验证功能示例

2019-11-19 17:49:26

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery基于正则表达式的表单验证功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript" language="javascript" >function validata(){  if($("#username").val()==""){  alert("请输入名字");  return false;  }  if($("#password").val()==""){  alert("请输入密码");  return false;  }  if($("#telephone").val()==""){  alert("请输入电话号码");  }  if($("#email").val()==""){  $("#email").val("shuangping@163.com");  }}function isInteger(obj){  reg=/^[-+]?/d+$/;  if(!reg.test(obj)){  $("#test").html("<b>Please input correct figures</b>");  }else{  $("#test").html("");  }}function isEmail(obj){  reg=/^/w{3,}@/w+(/./w+)+$/;  if(!reg.test(obj)){  $("#test").html("<b>请输入正确的邮箱地址</b>");  }else{  $("#test").html("");  }}function isString(obj){  reg=/^[a-z,A-Z]+$/;  if(!reg.test(obj)){  $("#test").html("<b>只能输入字符</b>");  }else{  $("#test").html("");  }}function isTelephone(obj){  reg=/^(/d{3,4}/-)?[1-9]/d{6,7}$/;  if(!reg.test(obj)){  $("#test").html("<b>请输入正确的电话号码！</b>");  }else{  $("#test").html("");  }}function isMobile(obj){  reg=/^(/+/d{2,3}/-)?/d{11}$/;  if(!reg.test(obj)){  $("#test").html("请输入正确移动电话");  }else{  $("#test").html("");  }}function isUri(obj){  reg=/^http:////[a-zA-Z0-9]+/.[a-zA-Z0-9]+[//=/?%/-&_~`@[/]/':+!]*([^<>/"/"])*$/;  if(!reg.test(obj)){  $("#test").html($("#uri").val()+"请输入正确的inernet地址");  }else{  $("#test").html("");  }}//document加载完毕执行$(document).ready(function() {// do something here//隔行换色功能$("p").each(function(i){  this.style.color=['red','green','blue','black'][i%2]  });//eq(2)获取$("p")集合的第3个元素$("p").eq(2).click(function(){$("#display").css("color","blue")});//所有test中的p都附加了样式"over"。$("#test>p").addClass("over");//test中的最后一个p附加了样式"out"。$("#test p:last").addClass("out");//选择同级元素还没看懂//$('#faq').find('dd').hide().end().find('dt').click(function()//选择父级元素$("a").hover(   function(){$(this).parents("p").addClass("out")},   function(){$(this).parents("p").removeClass("out")})//hover鼠标悬停效果，toggle每次点击时切换要调用的函数 ,//trigger(eventtype): 在每一个匹配的元素上触发某类事件,//bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定从每一个匹配的元素中（添加）删除绑定的事件。//方法的连写$("#display").hover(function(){  $(this).addClass("over");  },function(){   $(this).removeClass("over");  })  .click(function(){alert($("#display").text())});if($.browser.msie){//判断浏览器，若是ie则执行下面的功能  //聚焦  $("input[@type=text],textarea,input[@type=password]")  .focus(function(){$(this).css({background:"white",border:"1px solid blue"})})  //也可以这样连着写,  //.blur(function(){$(this).css({background:"white",border:"1px solid black"})})  //失去焦点  //css样式可以通过addClass()来添加  $("input[@type=text],textarea,input[@type=password]")  .blur(function(){$(this).css({background:"white",border:"1px solid black"});});}});</script><style type="text/css">.over{font-size:large;font-style:italic;}.out{font-size:small;}</style></head><body ><div id="display">demo</div><div id="test"><p>adfa<a>dfasfa</a>sdfasdf</p><p>adfadfasfasdfasdf</p><p>adfadfasfasdfasdf</p><p>adfadfasfasdfasdf</p></div><form id="theForm">isString<div><input type="text" id="username" onblur="isString(this.value)"/></div>isInteger<div><input type="text" id="password" onblur="isInteger(this.value)"/></div>isTelephone<div><input type="text" id="telephone" onblur="isTelephone(this.value)"/></div>isMobile<div><input type="text" id="mobile" onblur="isMobile(this.value)"/></div>isEmail<div><input type="text" id="email" onblur="isEmail(this.value)"/></div>isUri<div><input type="text" id="uri" onblur="isUri(this.value)"/></div><div><input type="button" value="Validata" onclick="return validata();" /></div></form></body></html>

附：常用的js验证函数：

网站首页表单js：

function checkVaild(){  var User=$("#Mobile").val();  var reg=/^(/+/d{2,3}/-)?/d{11}$/;  if (User=="")  {   alert("手机号码不能为空") ;   return false;  }  if(!reg.test(User)){  alert("手机号输入错误") ;  return false ;  }  return true ;}

正则表达式特殊字符的过滤：

function doValidate(value){  vkeyWords=/^[^`~!@#$%^&*()+=|///][/]/{/}:;'/,.<>/?]{1}[^`~!@$%^&()+=|///][/]/{/}:;'/,.<>?]{0,19}$/;  if(value==null || value=="")  {  alert("请输入正确的查询参数");  return false;  }  if(!vkeyWords.test(value))  {  alert("您输入的查询参数不正确,请重新输入!");  return false;  }  return true;}

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools.VeVB.COm/regex/javascript

正则表达式在线生成工具：
http://tools.VeVB.COm/regex/create_reg

更多关于jQuery相关内容可查看本站专题：《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：Vue结合原生js实现自定义组件自动生成示例

下一篇：一篇文章搞定JavaScript类型转换(面试常见)