javascript实现表单验证


Posted in Javascript onJanuary 29, 2016

本文实例讲解了javascript实现表单验证的详细代码,分享给大家供大家参考,具体内容如下

效果图:

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程序设计有所帮助。

Javascript 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 #Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 #Javascript
基于javascript实现listbox左右移动
Jan 29 #Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 #Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 #Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 #Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 #Javascript
You might like
PHP编实现程动态图像的创建代码
2008/09/28 PHP
Java中final关键字详解
2015/08/10 PHP
php验证手机号码
2015/11/11 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
如何理解Python中包的引入
2020/05/29 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
应届生求职自荐信
2014/07/04 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
谢师宴学生致辞
2015/07/27 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python