javascript实现表单验证
2016-01-29 10:04
771 查看
本文实例讲解了javascript实现表单验证的详细代码,分享给大家供大家参考,具体内容如下
效果图:
具体代码:
<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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- 数组方法汇总