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 相关文章推荐
JS 判断undefined的实现代码
Nov 26 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 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
You might like
php日历[测试通过]
2008/03/27 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
美国渔具店:FishUSA
2019/08/07 全球购物
数据库面试要点基本概念
2013/10/31 面试题
绿色城市实施方案
2014/03/19 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
详解NodeJS模块化
2021/06/15 NodeJs