用JavaScript做表单的校验

最新推荐文章于 2024-04-20 14:59:10 发布

原创

最新推荐文章于 2024-04-20 14:59:10 发布 · 1.5k 阅读

·

1

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用JavaScript进行表单验证。通过在输入框添加onblur事件，失去焦点时调用JS函数进行值的判断，并利用innerHTML显示提示信息。同时，在表单的onsubmit事件中检查所有输入项，只有当所有值符合要求时才允许表单提交。文章还提到了正则表达式在验证中的应用，如创建邮箱验证的正则表达式，并用test方法进行匹配检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果图

二、原理

表单的校验通过输入框中添加onblur事件，输入框失去焦点时调用js函数，js判断输入的值，操作文档，通过innerHTML属性把输入框后面的提示显示出来。

最后在form标签中添加onsubmit事件，点击注册按钮时调用js函数，仅当所有输入框的value符合要求时，返回true,，表单提交。否则返回false表单不提交。

三、注意事项

js中创建正则表达式需要用"/^……$/”，^表示从头开始匹配，$表示匹配到最后一个字符。例如var reg=/^\w+[@]\w+[.comn]{3,4}$/;

正则表达式的\w，表示a-z，A-Z，0-9还包括下划线。

通常使用正则的test方法来判断字符串是否与正则匹配，如果返回值为true，则匹配成功，返回false，匹配失败。

四、实现代码

    NormalText Code  
 

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

最低0.47元/天解锁文章

200万优质内容无限畅学

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。