首页
所有分类
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 相关文章推荐
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
javascript解析json数据的3种方式
May 08 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
从零学习node.js之模块规范（一）
Feb 21 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
Vue使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情）
May 16 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 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
vue-router-link(1) TimePickerView(1) 监听(2) watch(1) sched(1) 事件调度器(1) re模块(2) vue-cli3.x(1) 项目打包(2) scss(1)
You might like
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
php实现购物车功能（下）
2016/01/05 PHP
php文件上传的两种实现方法
2016/04/04 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python函数嵌套实例
2014/09/23 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
简单上手Python中装饰器的使用
2015/07/12 Python
详解python进行mp3格式判断
2016/12/23 Python
详解Python中的type和object
2018/08/15 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
python调用摄像头的示例代码
2020/09/28 Python
白俄罗斯大卖场：21vek.by
2019/07/25 全球购物
医学生自荐信
2013/12/03 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
企业员工集体活动方案
2014/08/17 职场文书
心灵捕手观后感
2015/06/02 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
如何用JS实现简单的数据监听
2021/05/06 Javascript
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL