首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现表单及时验证功能 用户信息立即验证

Posted in Javascript onSeptember 13, 2016

问题：表单怎么在输入后立即验证，而不是提交后再验证那么不方便（网上搜到的要么是模棱两可，要么是残缺不全…）

方法：鉴于此，小可，水山奇，将其代码补全，加上小可我个人的理解（注释）在上面，仅供后来者少走弯路，也请各路好汉批评指正…（转发请注作者,xiexie）————table表格版，以后会继续有JQuery版…

如果帮助到您，顶一下 ?(?O?)〃嗷~

截图：

js实现表单及时验证功能 用户信息立即验证

代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<!-- 此处引用外部css样式 -->
<link rel="stylesheet" href="css/style.css" />
 <script type="text/javascript">
 //及时验证用户名
 function checkuse(){
   //在每个函数中定义check变量是为了在表单提交后，能够逐个验证每个函数是否通过，很好很好。（以下同理）
   var check; 
   var username = document.getElementById("username").value; 
   if (username.length > 18 || username.length < 6) { 
    alert("用户名输入不合法，请重新输入！");
    //此处甚妙，既然你在此处输入错误，那么按理说当然要在此处继续输入了。（在此处继续获取焦点！）
    document.getElementById("username").focus();
    check = false; 
   } else { 
    document.getElementById("checktext1").innerHTML = "* 用户名由6-18位字符组成 √"; 
    check = true; 
   } 
   return check; 
  } 
 //利用正则表达式判断密码符合否
 function checkpwd() { 
  var check; 
  var reg = /[^A-Za-z0-9_]+/;
  var regs = /^[a-zA-Z0-9_\u4e00-\u9fa5] + $ /;
  var password = document.getElementById("password").value; 
  if (password.length < 6 || password.length > 18 || regs.test(password)) { 
   alert("密码输入不合法，请重新输入！");
   document.getElementById("password").focus();
   check = false; 
  } else { 
   document.getElementById("checktext2").innerHTML = "* 密码由6-18位字符组成，且必须包含字母、数字和标点符号 √"; 
   check = true; 
  } 
  return check; 
 } 
 //验证密码是否不一致！
 function checkpwdc() { 
  var check; 
  var password = document.getElementById("password").value; 
  var pwdc = document.getElementById("pwdc").value; 
  if (password != pwdc) { 
   alert("两次输入密码不一致，请重新输入！");
   document.getElementById("pwdc").focus();
   check = false; 
  } else { 
   document.getElementById("checktext3").innerHTML = "* 请再次输入你的密码 √"; 
   check = true; 
  } 
  return check; 
 }
 //提交时验证用户类别
 function checkut(){
  var check; 
  if(document.getElementById("selUser").selectedIndex == 0)
   {
    alert("请选择用户类型！");
    document.getElementById("selUser").focus();
    check = false; 
   }else{
    document.getElementById("checktext4").innerHTML = "* 请选择用户类型 √"; 
    check = true; 
   }
  return check; 
 }

 //提交时验证用户性别
 function checkGender(){
  var check; 
  var gender = "";
  //获取所有名称为sex的标签
  var sex = document.getElementsByName("sex");
  //遍历这些名称为sex的标签
  for(var i=0;i<sex.length;++i){
   //如果某个sex被选中，则记录
   if(sex[i].checked)
    gender = sex[i].value;  
  }
  if(gender == "")
   {
    alert("请选择性别！");
    check = false;
   }else{
    document.getElementById("checktext5").innerHTML = "* 请选择你的性别 √"; 
    check = true; 
   } 
  return check;
 }
 //及时验证出生日期
 function checkDate(){
  var check; 
  if(document.getElementById("txtDate").value ==""){
    alert("请填写出生日期！");
    document.getElementById("txtDate").focus();
    check = false;
   }else{
    document.getElementById("checktext6").innerHTML = "* 请选择你的出生日期 √"; 
    check = true;
   }
  return check;
 }
 //及时验证兴趣爱好
 function checkHobby(){
  var check; 
  var hobby = 0;
  //objNum为所有名称为hobby的input标签
  var objNum = document.getElementsByName("hobby");
  //遍历所有hobby标签
  for(var i=0;i<objNum.length;++i){
   //判断某个hobby标签是否被选中
   if(objNum[i].checked==true)
    hobby++;
  } 
  //如果有选中的hobby标签
  if(hobby >=1){
   document.getElementById("checktext7").innerHTML = "* 请选择你的兴趣爱好 √";   
   check = true;
  }else{
   alert("请填写爱好！");
   check = false;
  }
  return check; 
 }

 //正则表达式验证电子邮件（及时）
 function checkemail(){
  var check; 
  //电子邮件的正则表达式
  var e1 = document.getElementById("email").value.indexOf("@",0);
  var e2 = document.getElementById("email").value.indexOf(".",0);
  if(email == "" || (e1==-1 || e2==-1) || e2<e1 )
  {
   alert("E_mail输入错误!");
   document.getElementById("email").focus();
   check = false;
  } else { 
   document.getElementById("checktext8").innerHTML = "* 请填写常用的EMAIL，将用于密码找回 √"; 
   check = true; 
  } 
  return check; 
 } 
 //及时验证自我介绍
 function checkintro(){
  var check; 
  var intro = document.getElementById("introduction").value; 
  if (intro.length > 100) { 
   alert("字数超限！"); 
   check = false; 
  } else { 
   document.getElementById("checktext9").innerHTML = "* 限100字内 √";
   document.getElementById("checktext9").focus();
   check = true; 
  } 
  return check; 
 } 

 //提交表单时所有都验证一遍(若任何一个验证不通过，则返回为false，阻止表单提交)
 function check() { 
  var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby()
   && checkemail() &&checkintro(); 
  return check; 
 } 
 </script>

</head>
<body >
<!-- <form action ="跳转页面" method ="get"|"post" name ="表单名称" target ="打开方式" enctype="multipart/form-data" > -->
<!-- onsubmit()函数在返回值为true时提交表单。 -->

<form action="#" method="get" onsubmit="return check()" >
<fieldset>
<legend>
 表单及时验证小例子
</legend>
<table align="left" style="background-image: url('img/4.jpg');" >
 <tr>
  <td>用户名:</td>
  <td><input type="text" name="username" id="username" onchange=" checkuse()" /></td>
  <td id="checktext1">* 用户名由6-18位字符组成</td>
 </tr>

 <!-- onblur 事件处理程序:当元素或窗口失去焦点时触发该事件 -->
 <!-- onchange事件处理程序:当表单元素获取焦点，并且内容发生改变时，触发该事件 -->
 <!-- 以下同理 -->
 <tr>
  <td>密码:</td>
  <td><input type="password" name="password" id="password" onchange="checkpwd()" /></td>
  <td id="checktext2">* 密码由6-18位字符组成，且必须包含字母、数字和标点符号</td>
 </tr>

 <tr>
  <td>确认密码：</td>
  <td><input type="password" name="pwdc" id="pwdc" onchange="checkpwdc()" /></td>
  <td id="checktext3">* 请再次输入你的密码</td>
 </tr>

 <tr>
  <td>用户类型：</td>
  <td>
   <select id="selUser" onblur="checkut()">
    <option name="selUser" value="0">请选择</option>
    <option name="selUser" value="1">管理员</option>
    <option name="selUser" value="2">普通用户</option>  
   </select>
  </td>
  <td id="checktext4">* 请选择用户类型</td>
 </tr>

 <tr>
  <td>性别：</td>
  <td>
   <input type="radio" value="1" name="sex" onchange="checkGender()"/>男
   <input type="radio" value="2" name="sex" onchange="checkGender()"/>女
  </td>
  <td id="checktext5">* 请选择你的性别</td>
 </tr>

 <tr>
  <td>出生日期：</td>
  <td><input type="date" name="date" id="txtDate" onblur="checkDate()"/></td>
  <td id="checktext6">* 请选择你的出生日期</td>
 </tr>

 <tr>
  <td>兴趣爱好：</td>
  <td>
   <input type="checkbox" name="hobby" value="reading" onchange="checkHobby()">阅读
   <input type="checkbox" name="hobby" value="music" onchange="checkHobby()">音乐
   <input type="checkbox" name="hobby" value="sports" onchange="checkHobby()">运动
  </td>
  <td id="checktext7">* 请选择你的兴趣爱好</td>
 </tr>

 <tr>
  <td>电子邮件：</td>
  <td><input type="text" name="email" id="email" onchange="checkemail()"/></td>
  <td id="checktext8">* 请填写常用的EMAIL，将用于密码找回</td>
 </tr>

 <tr>
  <td>自我介绍：</td>
  <td><textarea cols="30" rows="3" name="introduction" id="introduction" onchange="checkintro()">这是自我介绍...</textarea></td>
  <td id="checktext9">* 限100字内</td>
 </tr>

 <tr>
  <td colspan="2" align="center">
   <input type="submit" name="submit" value="提交" />
   <input type="reset" name="reset" value="重置" />
  </td>
 </tr>
</table>
</fieldset>
</form>
</body>
</html>

CSS样式：

input:focus,textarea:focus{
  border:1px solid #f00;
  background:#fcc;
 }

 textarea{
  width:230px;
  height:50px;
 }

 body
 {
  font-size:15px;
  /* 字体的样式 */
  font-family:Microsoft YaHei; 
 }

 select option{
  font-size:10px;
  font-family:Microsoft YaHei;
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现表单及时验证功能 用户信息立即验证

- Author -

jianzhonghao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
深入理解JavaScript系列（42）：设计模式之原型模式详解
Mar 04 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
webpack打包多页面的方法
Nov 30 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
原生JS实现拖拽效果
Dec 04 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 #Javascript
浅谈JS的基础类型与引用类型
Sep 13 #Javascript
JavaScript简单下拉菜单特效
Sep 13 #Javascript
javascript特殊文本输入框网页特效
Sep 13 #Javascript
浅谈JS之iframe中的窗口
Sep 13 #Javascript
JS给swf传参数的实现方法
Sep 13 #Javascript
JS之相等操作符详解
Sep 13 #Javascript
曝光融合(1) pycryto(1) Vue3(1) 高动态范围(1) HDR(1) shell脚本(1) 数据加密(1) 连接器(1) axios(1) kafka(2)
You might like
php另类上传图片的方法（PHP用Socket上传图片）
2013/10/30 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
python调用cmd复制文件代码分享
2013/12/27 Python
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
Python-接口开发入门解析
2019/08/01 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
超市营业员求职简历的自我评价
2013/10/17 职场文书
见习期自我鉴定
2013/11/07 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
初中政治教学工作总结
2015/08/13 职场文书
银行服务理念口号
2015/12/25 职场文书
2019公司借款合同范本2篇！
2019/07/24 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python