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 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
js数组操作学习总结
Nov 04 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 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
php 中的4种标记风格介绍
2012/05/10 PHP
php反射应用示例
2014/02/25 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
python函数形参用法实例分析
2015/08/04 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
django云端留言板实例详解
2019/07/22 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
关于Python解包知识点总结
2020/05/05 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
公务员政审个人鉴定
2014/02/25 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
个人思想政治总结
2015/03/05 职场文书
2015年安全月活动总结
2015/03/26 职场文书
python全面解析接口返回数据
2022/02/12 Python
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python