个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
24
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章正则表达式进行页面表单验证功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
一般做到注册页面的时候，当用户填完信息，都需要对他们的信息进行验证，这就要用到正则表达式，具体看下面这个例子.
效果图：（当用户填写的信息不符合规范时显示错误提示） 。
我只提供了html结构和js，样式你们按照自己的设计稿自己写，我是分别给正确的时候和错误的时候加了不同的class，用了不同的高度，正确是高度小，可以把提示的红字隐藏.
html结构:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<div id=
"wrap"
>
<h1>注册</h1>
<div>
<input type=
"text"
class=
'match'
name=
'user'
placeholder=
'请输入用户名'
/>
<span>字母开头,长度5-10位字母数字下划线</span>
</div>
<div>
<input type=
"password"
class=
'match'
name=
'pwd'
placeholder=
'请输入密码'
/>
<span>字母数字长度6-18位</span>
</div>
<div>
<input type=
"password"
name=
'pwd2'
placeholder=
'请再次输入密码'
/>
<span>两次密码不一致</span>
</div>
<div>
<input type=
"text"
class=
'match'
name=
"tel"
placeholder=
'请输入电话'
/>
<span>电话号码格式不正确</span>
</div>
<div>
<input type=
"text"
class=
'match'
name=
"mail"
placeholder=
'请输入e-mail'
/>
<span>邮箱格式不正确</span>
</div>
<div>
<input type=
"text"
class=
'match'
name=
"IDCard"
placeholder=
'请输入身份证'
/>
<span>证件格式不正确</span>
</div>
<div class=
'submit'
>
<input type=
"submit"
value=
'注册'
/>
</div>
<p id=
'tip'
>请先输入密码</p>
</div>
|
js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
//正则表达式已//双斜杠开始和结束，限制必须要以什么什么开头要在之前加^，限制必须要以什么什么结尾要在后面加$，例：/^正则$/
<script type=
"text/javascript"
>
var
reg = {
user:/^[a-zA-Z]\w{4,9}$/,
//用来判断用户名，第一位不能为数字，也就是小写字母或者大写字母，后面的内容\w表示字符（数字字母下划线）
//要求是5-10位字符，所以出去第一位，还需要4-9位的\w
pwd:/^[\da-zA-Z]{6,18}$/,
//用来判断密码，html结构中要求是数字字符6到18位，\d表示数字
tel:/^1[34578]\d{9}$/,
//用来判断电话号码，通常手机号第一位为1，第二位只可能出现3.4.5.7.8，后面剩下的9位数字随机
mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/,
//用来判断邮箱，通常邮箱没有以0开头的，所以第一位为1-9数字或者小写字母或者大写字母，第二位开始任意字符
//也可以只有第一位没有第二位，*表示至少0个，@后面同理，小写字母或者大写字母或者数字，.需要转意符，所以写成\.
//点后面通常是com或者cn或者com.cn，所以是小写字母或者大写字母至少两位
IDCard:/^[1-9]\d{16}[\dxX]$/,
//用来判断身份证，通常第一位不为零，所以取1-9的数字，中间的16位数字随机，最后一位要么是数字要么是X
};
var
arr = [
document.getElementsByName(
'user'
)[0],
document.getElementsByName(
'pwd'
)[0],
document.getElementsByName(
'tel'
)[0],
document.getElementsByName(
'mail'
)[0],
document.getElementsByName(
'IDCard'
)[0]
];
for
(
var
i=0;i<arr.length;i++){
arr[i].onblur =
function
(){
if
(
this
.value){
if
(reg[
this
.name].test(
this
.value)){
this
.parentNode.className =
'right'
;
//判断正确的时候加的class
}
else
{
this
.parentNode.className =
'wrong'
;
//判断错误的时候加的class
this
.focus();
};
};
};
};
var
oTip = document.getElementById(
'tip'
);
var
opwd = document.getElementsByName(
'pwd2'
)[0];
opwd.onfous =
function
(){
if
(!arr[1].value){
arr[1].focus();
oTip.className =
'show'
;
setTimeout(
function
() {
oTip.className =
''
;
},1000);
};
};
opwd.onblur =
function
(){
if
(
this
.value){
if
(
this
.value != arr[1].value){
this
.focus();
this
.parentNode.className =
'wrong'
;
}
else
{
this
.parentNode.className =
'right'
;
};
};
};
</script>
|
以上所述是小编给大家介绍的正则表达式进行页面表单验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我网站的支持！ 。
原文链接：http://blog.csdn.net/gl0ry/article/details/60478792 。
最后此篇关于正则表达式进行页面表单验证功能的文章就讲到这里了,如果你想了解更多关于正则表达式进行页面表单验证功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
24
4
0
我正在用 yacc/bison 编写一个简单的计算器。 表达式的语法看起来有点像这样: expr : NUM | expr '+' expr { $$ = $1 + $3; } | expr '-'
我开始学习 lambda 表达式，并在以下情况下遇到了以下语句: interface MyNumber { double getValue(); } MyNumber number; nu
这两个 Linq 查询有什么区别: var result = ResultLists().Where( c=> c.code == "abc").FirstOrDefault(); // vs. va
如果我们查看 draft C++ standard 5.1.2 Lambda 表达式 段 2 说(强调我的 future ): The evaluation of a lambda-expressio
我使用的是 Mule 4.2.2 运行时、studio 7.5.1 和 Oracle JDK 1.8.0_251。 我在 java 代码中使用 Lambda 表达式，该表达式由 java Invoke
我是 XPath 的新手。我有网页的html源 http://london.craigslist.co.uk/com/1233708939.html 现在我想从上面的页面中提取以下数据 完整日期 电子
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 已关闭10 年前。 Improve th
我将如何编写一个 Cron 表达式以在每天上午 8 点和下午 3:30 触发？我了解如何创建每天触发一次的表达式，而不是在多个设定时间触发。提前致谢 最佳答案 你应该只使用两行。 0 8 * * *
这个问题已经有答案了: What do 3 dots next to a parameter type mean in Java? (9 个回答) varargs and the '...' argu
我是 python 新手，在阅读 BeautifulSoup 教程时，我不明白这个表达式“[x for x in titles if x.findChildren()][:-1]”我不明白？你能解释一
(?:) 这是一个有效的 ruby 正则表达式，谁能告诉我它是什么意思？ 谢谢 最佳答案 正如其他人所说，它被用作正则表达式的非捕获语法，但是，它也是正则表达式之外的有效 ruby 语法。 在
这个问题在这里已经有了答案: Why does ++[[]][+[]]+[+[]] return the string "10"? (10 个答案) 关闭 8 年前。 谁能帮我处理这个 JavaSc
这个问题在这里已经有了答案: What is the "-->" operator in C++? (29 个答案) Java: Prefix/postfix of increment/decrem
这个问题在这里已经有了答案: List comprehension vs. lambda + filter (16 个答案) 关闭 10 个月前。 我不确定我是否需要 lambda 或其他东西。但是，
C 中的 assert() 函数工作原理对我来说就像一片黑暗的森林。根据这里的答案https://stackoverflow.com/a/1571360 ，您可以使用以下构造将自定义消息输出到您的断言
在this页，John Barnes 写道: If the conditional expression is the argument of a type conversion then effec
我必须创建一个调度程序，它必须每周从第一天上午 9 点到第二天晚上 11 点 59 分运行 2 天(星期四和星期五)。为此，我需要提供一个 cron 表达式。 0-0 0-0 9-23 ? * THU
我正在尝试编写一个 Linq 表达式来检查派生类中的属性，但该列表由来自基类的成员组成。下面的示例代码。以“var list”开头的 Process 方法的第二行无法编译，但我不确定应该使用什么语法来
此 sed 表达式将输入字符串转换为两行输出字符串。两条输出行中的每一行都由输入的子串组成。第一行需要转换成大写: s:random_stuff\(choice1\|choice2\){\([^}]*
我正在使用 Quartz.Net 在我的应用程序中安排我的工作。我只是想知道是否可以为以下场景构建 CRON 表达式: Every second between 2:15AM and 5:20AM 最
我是一名优秀的程序员,十分优秀！