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 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
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
PHP5 安装方法
2007/01/15 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
小程序tab页无法传递参数的方法
2018/08/03 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
python实现决策树
2017/12/21 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
python调用webservice接口的实现
2019/07/12 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Python输出指定字符串的方法
2020/02/06 Python
python如何实现单链表的反转
2020/02/10 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python代码如何注释
2020/06/01 Python
美国批发供应商:Kole Imports
2019/04/10 全球购物
游戏商店:Eneba
2020/04/25 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
中小企业员工手册范本
2015/05/14 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书