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

JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)

Posted in Javascript onJune 09, 2017

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

方法：鉴于此，加上我个人的理解（注释）在上面。

截图：

JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)

代码：

<!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" rel="external nofollow" />
  <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;
  }

以上所述是小编给大家介绍的JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)

- Author -

水山奇

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

Javascript 相关文章推荐
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
React组件的三种写法总结
Jan 12 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
Vue仿支付宝支付功能
May 25 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
JS实现的随机排序功能算法示例
Jun 09 #Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 #jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 #jQuery
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 #Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 #Javascript
angularjs $http实现form表单提交示例
Jun 09 #Javascript
JavaScript设计模式之单例模式详解
Jun 09 #Javascript
Stater(1) sentinel(1) Windows server 2003(1) csgo(1) XPathParser(1) ACID(1) minio(1) sock(2) mysqldump(1) protocol(1)
You might like
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
基于jquery的时间段实现代码
2012/08/02 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
全面解析Bootstrap排版使用方法（文字样式）
2015/11/30 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
python+mysql实现简单的web程序
2014/09/11 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
某同学的自我鉴定范文
2013/12/26 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
工会趣味活动方案
2014/08/18 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
个人租房协议书
2014/11/28 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
初中数学教学随笔
2015/08/15 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS