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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 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
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
python自动化测试之setUp与tearDown实例
2014/09/28 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
python绘制规则网络图形实例
2019/12/09 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
华为慧通笔试题
2016/04/22 面试题
地理教师岗位职责
2014/03/16 职场文书
职业规划实施方案
2014/06/10 职场文书
中学生自我评价范文
2015/03/03 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书