这篇文章主要介绍了JS简单表单验证功能,结合完整实例形式分析了JavaScript表单验证相关的字符串判断、正则验证、计算等相关操作,需要的朋友可以参考下

本文实例讲述了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>

运行结果:

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

JavaScript正则表达式在线测试工具:
http://tools.lovean.com/regex/javascript

正则表达式在线生成工具:
http://tools.lovean.com/regex/create_reg

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

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

最新资讯
维珍银河预计将于12月11日进行航天飞行测试

维珍银河预计将于12月

维珍银河(Virgin Galactic)表示,预计将于下周五(12月11日)
携程发布第三季度财报:营收55亿元 同比下降48%

携程发布第三季度财报

财报显示,携程网第三季度净营收为人民币55亿元(约合8.05
虾米将死:阿里退场 但在线音乐市场还未“尘埃落定”

虾米将死:阿里退场 但

  原标题:虾米将死:阿里退场,但在线音乐市场还未“尘埃
Salesforce第三季度同比扭亏为盈 宣布277亿美元收购Slack

Salesforce第三季度同

Salesforce第三季度总营收为54.19亿美元,与去年同期的4
比特币迭创新高新镜像 华尔街机构竞夺定价权

比特币迭创新高新镜像

随着比特币持续飙涨,欧美金融监管部门对数字加密货币的
苹果发了个红包 收到的却说:没有诚意!

苹果发了个红包 收到

应用市场的垄断时代正在过去,以后用户想要玩一款游戏,可
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,