这篇文章主要介绍了 javascript 实现表单验证的相关资料,以一个完整的实例对 javascript 实现表单验证的方法进行分析,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
具体代码:
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- </head>
- <script type="text/javascript">
- function check() {
- //真实姓名(不能为空,其它没有要求)
- var name = document.getElementById("name").value;
- if (name == "" || name == null) {
- alert("不能为空!");
- return false;
- }
- //登录名(登录名不能为空,长度在5-8之间,可以包含中文字符())一个汉字算一个字符
- var loginName = document.getElementById("loginName").value;
- if (loginName == "" || loginName == null) {
- alert("登录名不能为空");
- return false;
- }
- //\u4e00-\u9fa5 验证中文字符
- var reg = /^[A-Za-z0-8\u4e00-\u9fa5]{5,8}$/;
- var result = reg.test(loginName);
- if (!result) {
- alert("登录名长度在5-8之间!");
- return false;
- }
- //密码(不能为空,长度6-12字符或数字,不能包含中文字符)
- var pwd = document.getElementById("pwd").value;
- if (pwd == "" || pwd == null) {
- alert("密码不能为空!");
- return false;
- }
- var regpwd = /^[A-Za-z0-9]{6,12}$/;
- if (!regpwd.test(pwd)) {
- alert("密码长度在6-12之间");
- return false;
- }
- //确认密码(不能为空,长度6-12字符或数字,不能包含中文字符,与密码一致)
- var repwd = document.getElementById("repwd").value;
- if (repwd == "" || repwd == null) {
- alert("确认密码不能为空!");
- return false;
- }
- if (repwd != pwd) {
- alert("确认密码与密码不一致");
- return false;
- }
- //身份证(15或18位)
- var idcard = document.getElementById("idcard").value;
- if (idcard == "" || idcard == null) {
- alert("身份证不能空!");
- return false;
- }
- if ((idcard.length != 15) && (idcard.length != 18)) {
- alert("身份证必选为15或18位");
- return false;
- }
- if (idcard.length == 15) {
- var regIDCard = /^\d{15}$/;
- if (!regIDCard.test(idcard)) {
- alert("身份证输入错误");
- return false;
- }
- }
- if (idcard.length == 18) {
- var regIDCard = /^\d{18}|\d{17}[x|X]{1}$/;
- if (!regIDCard.test(idcard)) {
- alert("身份证输入错误");
- return false;
- }
- }
- }
- </script>
- <body>
- <h3>
- javascript验证
- </h3>
- <table width="854" border="1">
- <tr>
- <td width="633">
- 真实姓名(不能为空,其它没有要求)
- </td>
- <td width="205">
- <input id="name" name="name" type="text" />
- </td>
- </tr>
- <tr>
- <td>
- 登录名(登录名不能为空,长度在5-8之间,可以包含中文字符())一个汉字算一个字符
- </td>
- <td>
- <input id="loginName" name="loginName" type="text" />
- </td>
- </tr>
- <tr>
- <td>
- 密码(不能为空,长度6-12字符或数字,不能包含中文字符)
- </td>
- <td>
- <input id="pwd" name="pwd" type="password" />
- </td>
- </tr>
- <tr>
- <td>
- 确认密码(不能为空,长度6-12字符或数字,不能包含中文字符,与密码一致)
- </td>
- <td>
- <input id="repwd" name="repwd" type="password" />
- </td>
- </tr>
- <tr>
- <td>
- 性别(必选其一)
- </td>
- <td>
- <input id="sex" name="sex" type="radio" value="男" checked="checked" />
- 男
- <input id="sex" name="sex" type="radio" value="女" />
- 女
- </td>
- </tr>
- <tr>
- <td>
- 身份证(15或18位)
- </td>
- <td>
- <input type="text" id="idcard" name="idcard" />
- </td>
- </tr>
- <tr>
- <td colspan="2" align="center">
- <input type="button" id="check" value="提交" onclick="check()" />
- </td>
- </tr>
- </table>
- </body>
- </html>
希望本文所述对大家学习 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0407/267289.html