首页
所有分类
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 相关文章推荐
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 Javascript
javascript实现倒计时提示框
Mar 02 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
二维码(2) Word(2) Eclipse(1) 延时任务(1) openGauss(1) 条码(1) pdf(1) 日志(1) JDBC(3) 太阳码(1)
You might like
分享PHP header函数使用教程
2013/09/05 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
php析构函数的简单使用说明
2015/08/24 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
php微信公众平台开发（四）回复功能开发
2016/12/06 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
async/await与promise（nodejs中的异步操作问题）
2017/03/03 NodeJs
VueJS 集成 Medium Editor的示例代码 （自定义编辑器按钮）
2017/08/24 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
vant实现购物车功能
2020/06/29 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
python逐行读写txt文件的实例讲解
2018/04/03 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
墨西哥皇宫度假村预订：Palace Resorts
2018/06/16 全球购物
路由表示做什么用的？在linux环境中怎么来配置一条默认路由？
2013/06/07 面试题
金融事务专业毕业生求职信
2014/02/23 职场文书
中秋节主持词
2014/04/02 职场文书
贷款担保书范文
2014/05/13 职场文书
数学系毕业生求职信
2014/05/29 职场文书
车间主任岗位职责范本
2015/04/08 职场文书