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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
一篇文章搞定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 注册时输入信息验证器的实现详解
2013/07/05 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
JavaScript实现通讯录功能
2020/12/27 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python绘制七段数码管实例代码
2017/12/20 Python
python中set()函数简介及实例解析
2018/01/09 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
python怎么删除缓存文件
2020/07/19 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
中专自我鉴定
2014/02/05 职场文书
公司建议书怎么写
2014/05/15 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
高二化学教学反思
2016/02/22 职场文书