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


Posted in Javascript onJanuary 21, 2017

本文实例讲述了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>
Javascript 相关文章推荐
jQuery之自动完成组件的深入解析
Jun 19 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
JS实现标签页切换效果
May 04 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 #Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 #Javascript
Mongoose学习全面理解(推荐)
Jan 21 #Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 #Javascript
vue实现添加标签demo示例代码
Jan 21 #Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 #Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 #Javascript
You might like
php操作xml
2013/10/27 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python实现二叉堆
2016/02/03 Python
python 文件查找及内容匹配方法
2018/10/25 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
python怎么对数字进行过滤
2020/07/05 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
超市实习总结自我鉴定
2013/09/19 职场文书
零件设计自荐信范文
2013/11/27 职场文书
客服专员岗位职责
2014/02/28 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
2015年教研组工作总结
2015/05/04 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
2016国培研修心得体会
2016/01/08 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
Vue h函数的使用详解
2022/02/18 Vue.js