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怎么终止程序return不行换jfslk
May 30 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
js文字横向滚动特效
Nov 11 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
cypress测试本地web应用
Jun 01 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
星际流派综述
2020/03/04 星际争霸
php中http_build_query 的一个问题
2012/03/25 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
php实现数字补零的方法总结
2018/09/12 PHP
图片自动更新(说明)
2006/10/02 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
详解javascript高级定时器
2015/12/31 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
python抽取指定url页面的title方法
2018/05/11 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Python列表与元组的异同详解
2019/07/02 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
前台文员的岗位职责
2013/11/14 职场文书
会计学自我鉴定
2014/02/06 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书