jQuery正则表达式验证表单代码演示

更新时间：2024年05月13日 08:41:03 作者：花落残月时

这篇文章主要给大家介绍了关于jQuery正则表达式验证表单的相关资料,我们在写表单的时候会通过一些正则表达式来验证是否正确,文中通过代码介绍的非常详细,需要的朋友可以参考下

简介：

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery
Form有两个核心方法 – ajaxForm() 和 ajaxSubmit()，
它们集合了从控制表单元素到决定如何管理提交进程的功能。另外，插件还包括其他的一些方法：
formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields()
和 resetForm()等。

什么是正则表达式以及作用：

正则表达式，又称规则表达式,（Regular
Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z
之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。

正则表达式中的括号()主要有两个作用：分组和捕获。

分组：在正则表达式中，括号可以用来将一些字符组合在一起，形成一个分组。这通常用于确定优先级、重复次数或特殊的匹配规则。例如，(ab)可以将字符a和b组合在一起作为一个整体进行匹配。
捕获：当正则表达式中的括号内匹配到特定的文本时，可以将这些文本保存下来，以便后续使用。捕获的内容可以用于替换操作或者在其他正则表达式中进行引用。例如，在替换操作中，可以使用\1来引用第一个捕获的内容。

●文本框内容的验证：

1、实现思路

2、使用 String 对象的 length 属性验证密码的长度

3、验证两次输入密码是否一致

4、使用 length 属性获取文本长度，然后使用 for 循环和 substring ( ) 方法依次截断单个字符，最后判断每个字符是否是数字

标签	描述
form	定义供用户输入的表单
input	定义输入域
textarea	定义文本域 (一个多行的输入控件)
label	定义了 input 元素的标签，一般为输入标题
fieldset	定义了一组相关的表单元素，并使用外框包含起来
legend	定义了 fieldset 元素的标题
select	定义了下拉选项列表
optgroup	定义选项组
option	定义下拉列表中的选项
button	定义一个点击按钮

代码演示示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>

  .over { font-size: large; font-style: italic; }
  .out { font-size: small; }
</style>
<body>

<div id="display">demo</div>
<div id="test">

</div>

<form id="theForm">
  输入字符
  <div>
    <input type="text" id="username" onblur="isString(this.value)">
  </div>
  输入正确的数字
  <div>
    <input type="text" id="password" onblur="isInteger(this.value)">
  </div>
  输入正确的电话
  <div>
    <input type="text" id="telephone" onblur="isTelephone(this.value)">
  </div>
  确移动电话
  <div>
    <input type="text" id="mobile" onblur="isMobile(this.value)">
  </div>
  邮箱地址
  <div>
    <input type="text" id="email" onblur="isEmail(this.value)">
  </div>
  inernet地址
  <div>
    <input type="text" id="uri" onblur="isUri(this.value)">
  </div>
  <div>
    <input type="button" value="Validata" onclick="return validata();">
  </div></form>
<script src="../jQuery/jquery-1.12.4.js"></script>
<script>
  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())
    });

  });

</script>
</body>
</html>

总结

到此这篇关于jQuery正则表达式验证表单的文章就介绍到这了,更多相关jQuery正则验证表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS Array.from()将伪数组转换成数组的方法示例
这篇文章主要介绍了JS Array.from()将伪数组转换成数组的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
微信小程序实现表单验证提交功能
这篇文章主要为大家详细介绍了微信小程序实现表单验证提交功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript计算两个日期之间天数的各种方法总结
这篇文章主要介绍了利用JavaScript计算两个日期之间天数的各种方法,你可以使用JavaScript的Date对象来计算两个字符串日期之间的天数差异,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-07-07
Javascript实现页面跳转的几种方式分享
这篇文章介绍了Javascript实现页面跳转的几种方式，有需要的朋友可以参考一下
2013-10-10
js实现二代身份证号码验证详解
本文给大家分享一段超级全面的二代身份证号码验证程序，由JS编写而成，可以校验身份证的地址码、出生日期码、顺序码和数字校验码。是身份证去伪存真的一大利器。
2014-11-11
微信小程序自定义音乐进度条的实例代码
最近遇到这样的需求：显示音乐播放按钮、可手动拖拽进度条；页面中含多个音乐，播放当前音乐时暂停其他音乐播放。这篇文章主要介绍了微信小程序自定义音乐进度条的实例代码,需要的朋友可以参考下
2018-08-08
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
这篇文章主要介绍了JavaScript学习小结之使用canvas画“哆啦A梦”时钟的相关资料,需要的朋友可以参考下
2016-07-07
关于js遍历表格的实例
js可以利用dom非常轻松的就可以遍历一个表格。当然只要是dom中有的所有对象都可以通过js来访问和处理
2013-07-07
js canvas实现QQ拨打电话特效
这篇文章主要为大家详细介绍了js canvas实现QQ拨打电话特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JS时间戳与日期格式的转换小结
这篇文章主要介绍了JS时间戳与日期格式的转换小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01