发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

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

盼攀峰

2

主题

2

帖子

6

积分

新手上路

Rank: 1

积分
6
显示全部楼层
简介：
  1. jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQueryForm有两个核心方法 – ajaxForm() 和 ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进程的功能。另外，插件还包括其他的一些方法：formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields()和 resetForm()等。
复制代码
什么是正则表达式以及作用：
  1. 正则表达式，又称规则表达式,（RegularExpression，在代码中常简写为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定义一个点击按钮

代码演示示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <style>

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

  14. <div id="display">demo</div>
  15. <div id="test">

  17. </div>

  19. <form id="theForm">
  20.   输入字符
  21.   <div>
  22.     <input type="text" id="username" onblur="isString(this.value)">
  23.   </div>
  24.   输入正确的数字
  25.   <div>
  26.     <input type="text" id="password" onblur="isInteger(this.value)">
  27.   </div>
  28.   输入正确的电话
  29.   <div>
  30.     <input type="text" id="telephone" onblur="isTelephone(this.value)">
  31.   </div>
  32.   确移动电话
  33.   <div>
  34.     <input type="text" id="mobile" onblur="isMobile(this.value)">
  35.   </div>
  36.   邮箱地址
  37.   <div>
  38.     <input type="text" id="email" onblur="isEmail(this.value)">
  39.   </div>
  40.   inernet地址
  41.   <div>
  42.     <input type="text" id="uri" onblur="isUri(this.value)">
  43.   </div>
  44.   <div>
  45.     <input type="button" value="Validata" onclick="return validata();">
  46.   </div></form>
  47. <script src="../jQuery/jquery-1.12.4.js"></script>
  48. <script>
  49.   function validata() {
  50.     if ($("#username").val() == "") {
  51.       alert("请输入名字");
  52.       return false;
  53.     }
  54.     if ($("#password").val() == "") {
  55.       alert("请输入密码");
  56.       return false;
  57.     }
  58.     if ($("#telephone").val() == "") {
  59.       alert("请输入电话号码");
  60.     }
  61.     if ($("#email").val() == "") {
  62.       $("#email").val("shuangping@163.com");
  63.     }
  64.   }
  65.   function isInteger(obj) {
  66.     reg = /^[-+]?\d+$/;
  67.     if (!reg.test(obj)) {
  68.       $("#test").html("<b>Please input correct figures</b>");
  69.     } else {
  70.       $("#test").html("");
  71.     }
  72.   }
  73.   function isEmail(obj) {
  74.     reg = /^\w{3,}@\w+(\.\w+)+$/;
  75.     if (!reg.test(obj)) {
  76.       $("#test").html("<b>请输入正确的邮箱地址</b>");
  77.     } else {
  78.       $("#test").html("");
  79.     }
  80.   }
  81.   function isString(obj) {
  82.     reg = /^[a-z,A-Z]+$/;
  83.     if (!reg.test(obj)) {
  84.       $("#test").html("<b>只能输入字符</b>");
  85.     } else {
  86.       $("#test").html("");
  87.     }
  88.   }
  89.   function isTelephone(obj) {
  90.     reg = /^(\d{3,4}\-)?[1-9]\d{6,7}$/;
  91.     if (!reg.test(obj)) {
  92.       $("#test").html("<b>请输入正确的电话号码！</b>");
  93.     } else {
  94.       $("#test").html("");
  95.     }
  96.   }
  97.   function isMobile(obj) {
  98.     reg = /^(\+\d{2,3}\-)?\d{11}$/;
  99.     if (!reg.test(obj)) {
  100.       $("#test").html("请输入正确移动电话");
  101.     } else {
  102.       $("#test").html("");
  103.     }
  104.   }
  105.   function isUri(obj) {
  106.     reg = /^http:\/\/[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>""])*$/;
  107.     if (!reg.test(obj)) {
  108.       $("#test").html($("#uri").val() + "请输入正确的inernet地址");
  109.     } else {
  110.       $("#test").html("");
  111.     }
  112.   }
  113.   //document加载完毕执行
  114.   $(document).ready(function() {
  115.     // do something here
  116.     //隔行换色功能
  117.     $("p").each(function(i) {
  118.       this.style.color = ['red', 'green', 'blue', 'black'][i % 2]
  119.     });
  120.     //eq(2)获取$("p")集合的第3个元素
  121.     $("p").eq(2).click(function() {
  122.       $("#display").css("color", "blue")
  123.     });
  124.     //所有test中的p都附加了样式"over"。
  125.     $("#test>p").addClass("over");
  126.     //test中的最后一个p附加了样式"out"。
  127.     $("#test p:last").addClass("out");
  128.     //选择同级元素还没看懂
  129.     //$('#faq').find('dd').hide().end().find('dt').click(function()
  130.     //选择父级元素
  131.     $("a").hover(function() {
  132.         $(this).parents("p").addClass("out")
  133.       },
  134.       function() {
  135.         $(this).parents("p").removeClass("out")
  136.       })
  137.     //hover鼠标悬停效果，toggle每次点击时切换要调用的函数 ,
  138.     //trigger(eventtype): 在每一个匹配的元素上触发某类事件,
  139.     //bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定从每一个匹配的元素中（添加）删除绑定的事件。
  140.     //方法的连写
  141.     $("#display").hover(function() {
  142.         $(this).addClass("over");
  143.       },
  144.       function() {
  145.         $(this).removeClass("over");
  146.       }).click(function() {
  147.       alert($("#display").text())
  148.     });

  150.   });

  152. </script>
  153. </body>
  154. </html>
复制代码
总结

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

来源:https://www.jb51.net/javascript/32099695s.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

上一篇: Vue3快速diff算法的处理过程

下一篇: 使用Node操作MySQL的两种方式

发表于 2024-5-27 15:19:43

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4