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表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 判断undefined的实现代码
Nov 26 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
Element Notification通知的实现示例
Jul 27 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
You might like
PHP学习之PHP运算符
2006/10/09 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
php设计模式之单例模式代码
2016/06/11 PHP
php use和include区别总结
2019/10/13 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
三月法制宣传月活动总结
2014/07/03 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书