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;
 }

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

Javascript 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
javascript动态加载三
Aug 22 Javascript
javascript中setInterval的用法
Jul 19 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
jquery拖动改变div大小
Jul 04 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
vue treeselect获取当前选中项的label实例
Aug 31 Javascript
使用JS实现简易计算器
Jun 14 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
浅谈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
You might like
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
JS event使用方法详解
2008/04/28 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
微信小程序日历效果
2018/12/29 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
Python的subprocess模块总结
2014/11/07 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Python实现的双色球生成功能示例
2017/12/18 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python 3 判断2个字典相同
2019/08/06 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript