jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法


Posted in jQuery onDecember 05, 2017

本文实例讲述了jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法。

jQuery 脚本

<script type="text/javascript">
function check_password() {
  if ($("#password").val() != $("#checkPWD").val()){
    alert("请保证两次输入密码的一致性!");
    $("#checkPWD").focus();
  }
}
function check_email() {
  var reg = /\w+[@]{1}\w+[.]\w+/;
  if (!reg.test($("#email").val())){
    alert("请输入正确的email!");
    $("#email").focus();
  }
}
function check_phone() {
  var reg = /^1[34578]\d{9}$/;
  if (!reg.test($("#phone").val())){
    alert("请输入正确的手机号!");
    $("#phone").focus();
  }
}
</script>

html 文件

<!DOCTYPE html>
<html>
<head>
  <script src="jquery1.3.2.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>注册界面</title>
</head>
<body>
  <center>
    <h1>用户注册</h1>
    <form action="" method="post">
      <table width="400px" cellspacing="0px" cellpadding="0px" border="1px">
        <tr>
          <td>用户名</td>
          <td><input type="text" name="username" placeholder="用户名为3-12位字母数字或下划线组合" ></td>
        </tr>
        <tr>
          <td>密 码</td>
          <td><input type="password" name="password" placeholder="密码长度为6-12位的纯数字" id="password"></td>
        </tr>
        <tr>
          <td>确认密码</td>
          <td><input type="password" name="checkPWD" placeholder="密码长度为6-12位的纯数字" id="checkPWD" onchange="check_password()"></td>
        </tr>
        <tr>
          <td>手机号码</td>
          <td><input type="text" name="phone" placeholder="请输入正确的手机号码格式" id="phone" onchange="check_phone()"></td>
        </tr>
        <tr>
          <td>邮箱</td>
          <td><input type="email" name="email" placeholder="请输入正确邮箱格式" id="email" onchange="check_email()" required="required"></td>
        </tr>
        <tr>
          <td colspan="2" style="text-align:center">
            <input type="submit" value="注册">
            <input type="reset" value="重置">
          </td>
        </tr>
      </table>
    </form>
  </center>
</body>
</html>

运行结果:

jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法

jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法

jQuery 相关文章推荐
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现日历效果
Sep 11 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 #jQuery
JS和JQuery实现雪花飘落效果
Nov 30 #jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 #jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 #jQuery
jquery animate动画持续运动的实例
Nov 29 #jQuery
JQuery 又谈ajax局部刷新
Nov 27 #jQuery
You might like
sony ICF-2010 拆解与改装
2021/03/02 无线电
php防止表单重复提交实例讲解
2019/02/11 PHP
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
vue如何判断dom的class
2018/04/26 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python生成器与迭代器详解
2019/01/01 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
Python基于execjs运行js过程解析
2020/11/27 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
Oracle的内存结构(Memory structures)
2015/06/10 面试题
单位办理社保介绍信
2014/01/10 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
社区文化建设方案
2014/05/02 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
员工辞职信怎么写
2015/02/27 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
校车司机安全责任书
2015/05/11 职场文书
遗愿清单观后感
2015/06/09 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
导游词之凤凰古城
2019/10/22 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis