DDR爱好者之家

JS简单表单验证功能完整示例
站长资源 2024/12/28 佚名
75 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了JS简单表单验证功能。分享给大家供大家参考，具体如下：

简单js表单验证demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  <script>
    //当用户名获取焦点时
    function focus_username(){
      document.getElementById("user_res").innerHTML="<font color='#f00'>请输入用户名</font>";
    }
    //当用户名失去焦点时
    function blur_username(){
      var user_value=document.getElementsByName("username")[0].value;
      if(user_value.length===0){
      document.getElementById("user_res").innerHTML="<font color='#f00'>你没有输入用户名</font>";
          return false;
          //判断其长度是否在5~18之间 如果不在就提示用户
      }else if(user_value.length<5||user_value.length>18)
      {
      document.getElementById("user_res").innerHTML="<font color='#f00'>用户名长度必须在5-18之间</font>";
          return false;
      }else if(!checkUser(user_value)){
        //用户名还有特殊符号
      document.getElementById("user_res").innerHTML="<font color='#f00'>用户名含有特殊符号</font>";
          return false;
      }else{
        //用户名合法
      document.getElementById("user_res").innerHTML="<font color='#00f'>用户名合法</font>";
          return true;
      }
    }
    //密码获取焦点时
    function focus_password(){
      document.getElementById("pass_res").innerHTML="<font color='#f00'>请输入密码</font>";
    }
    //密码失去焦点时
    function blur_password(){
      var user_value=document.getElementsByName("password")[0].value;
      if(user_value.length===0){
      document.getElementById("pass_res").innerHTML="<font color='#f00'>你没有输入密码</font>";
          return false;
          //判断其长度是否在5~18之间 如果不在就提示用户
      }else if(user_value.length<5||user_value.length>18)
      {
      document.getElementById("pass_res").innerHTML="<font color='#f00'>用密码长度必须在5-18之间</font>";
          return false;
      }else{
        //密码合法
      document.getElementById("pass_res").innerHTML="<font color='#00f'>密码合法</font>";
          return true;
      }
    }
     function checkUser(user){
      var arr=["<",">","#","","%"];
      var arr_length=arr.length;
      var user_length=user.length;
      for(var i=0;i<arr_length;i++){
        for(var j=0;j<user_length;j++){
          if(arr[i]===user.charAt(j)){
            return false;
          }
        }
      }
      //表示用户名合法
       return true;
     }
     //提交提交表单验证
     function checkForm(){
      var user_flag=blur_username();
      var pass_flag=blur_password();
      if(user_flag && pass_flag){
        alert("提交合法表单");
         return true;
      }else{
        alert("输入不合法");
        return false;
      }
     }
  </script>
</head>
<body>
　　　　　　　　　　　　　　　　　　　　　　　　　　<!--action 参数自定义跳转页面-->
  <form name='form1' onsubmit='return checkForm()' action='index.php'>
    <table width='600' align='center'>
      <tr>
        <td align='right' width='150'>用户名:</td>
        <td width='100'><input type='text' name='username' onfocus='focus_username()' onblur = 'blur_username()'/></td>
        <td><span id="user_res"></span></td>
      </tr>
      <tr>
        <td align='right' width='100'>密码:</td>
        <td width='100'><input type='password' name='password' onfocus='focus_password()' onblur = 'blur_password()'/></td>
        <td><span id="pass_res"></span></td>
      </tr>
      <tr>
        <td></td>
        <td><input type='submit' value='提交' /></td>
      </tr>
    </table>
  </form>
</body>
</html>

运行结果：

JS简单表单验证功能完整示例

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript表单(form)操作技巧大全》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米