IT俱乐部 JavaScript jQuery正则表达式验证表单代码演示

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 定义一个点击按钮

代码演示示例:



  Title

  .over { font-size: large; font-style: italic; }
  .out { font-size: small; }
demo

输入字符

输入正确的数字

输入正确的电话

确移动电话

邮箱地址

inernet地址

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(“Please input correct figures”);
} else {
$(“#test”).html(“”);
}
}
function isEmail(obj) {
reg = /^w{3,}@w+(.w+)+$/;
if (!reg.test(obj)) {
$(“#test”).html(“请输入正确的邮箱地址”);
} else {
$(“#test”).html(“”);
}
}
function isString(obj) {
reg = /^[a-z,A-Z]+$/;
if (!reg.test(obj)) {
$(“#test”).html(“只能输入字符”);
} else {
$(“#test”).html(“”);
}
}
function isTelephone(obj) {
reg = /^(d{3,4}-)?[1-9]d{6,7}$/;
if (!reg.test(obj)) {
$(“#test”).html(“请输入正确的电话号码!”);
} 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())
});

});

总结 

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

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/11060.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们