Skip to content

表单验证

简述

表单验证是在用户提交表单前，对输入内容做检查，判断是否符合规则；不合格就提示、阻止提交，避免脏数据传给后台。

  1. 减轻服务器压力，前端先过滤错误内容
  2. 提升用户体验，实时提示输入错误
  3. 保证数据规范（手机号、密码、邮箱必填等）
  1. HTML原生验证：required、type="email"、pattern，浏览器自带校验
  2. JS自定义验证：灵活强大，可写复杂规则、自定义提示文案
  • 必填：不能为空
  • 手机号：11位数字，符合手机号格式
  • 邮箱：符合邮箱格式（如 example@domain.com）
  • 密码：长度（至少6位）、复杂度（包含字母、数字、特殊字符）
  • 两次密码一致：确认密码与原密码相同
  • 身份证号：18位，最后一位可能是X
  • 长度限制：最小/最大长度
  • 数字：纯数字输入
  • 验证码：数字/字母组合，指定长度（如6位）
  • 金额：正数，最多两位小数

表单验证的内容

表单验证的内容

<input id="phone" placeholder="手机号">
<button onclick="checkForm()">提交</button>

<script>
function checkForm(){
  let phone = document.getElementById('phone').value;
  // 简单手机号正则
  let reg = /^1\d{10}$/;
  if(!reg.test(phone)){
    alert('手机号格式错误');
    return false; // 阻止提交
  }
  alert('校验通过，可提交');
}
</script>

表单验证的思路

问题

如何编写脚本验证表单？

分析

  1. 获取表单元素的值（String类型），然后进行判断

  2. 触发表单（FORM）的提交事件（onSubmit）

使用 var 语句 

var newstr = "这是我的字符串"

创建 String 对象

var newstr = new String("这是我的字符串")

调用方法和属性

字符串对象.属性名
字符串对象.方法名( )
名 称 说 明
length 获取字符串字符的个数
indexOf(“子字符串”，起始位置) 查找子字符串的位置
charAt(index) 获取位于指定索引位置的字符
substring(index1,index2 ) 求子串
toLowerCase( ) 将字符串转换成小写
toUpperCase( ) 将字符串转换成大写

电子邮件验证

  • 效果

  • 源代码

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <SCRIPT LANGUAGE="JavaScript">
  function checkEmail() {
    var strEmail = document.myform.txtEmail.value;
    if (strEmail.length == 0) {
      alert("电子邮件不能为空!");
      return false;
    }
    if (strEmail.indexOf("@", 0) == -1) {
      alert("电子邮件格式不正确\n必须包含@符号！");
      return false;
    }
    if (strEmail.indexOf(".", 0) == -1) {
      alert("电子邮件格式不正确\n必须包含.符号！");
      return false;
    }
    return true;
  }
</SCRIPT>

<FORM name="myform" method="post" action="reg_success.htm" onSubmit="return checkEmail( )">
  <INPUT name="txtEmail" type="text" id="txtEmail">
</FORM>
源代码 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>使用字符串</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
    function checkEmail() {
      var strEmail = document.myform.txtEmail.value;
      if (strEmail.length == 0) {
        alert("电子邮件不能为空!");
        return false;
      }
      if (strEmail.indexOf("@", 0) == -1) {
        alert("电子邮件格式不正确\n必须包含@符号！");
        return false;
      }
      if (strEmail.indexOf(".", 0) == -1) {
        alert("电子邮件格式不正确\n必须包含.符号！");
        return false;
      }
      return true;
    }
  </SCRIPT>
</HEAD>
<FORM name="myform" method="post" action="reg_success.htm" onSubmit="return checkEmail( )">
  <P><IMG src="images/reg_back1.jpg" width="979" height="195"></P>
  <P>&nbsp;</P>
  <TABLE border="0" align="center">
    <TR>
      <TD>您的电子邮件 </TD>
      <TD colspan="2"><INPUT name="txtEmail" type="text" id="txtEmail">
        *必填</TD>
    </TR>
    <TR>
      <TD colspan="3" align="center">
        <P>&nbsp;
        </P>
        <P>
          <INPUT name="clearButton" type="reset" id="clearButton" value="  清 空  ">
          <INPUT name="registerButton" type="submit" id="registerButton" value="  注  册  ">
        </P>
      </TD>
    </TR>
  </TABLE>
  <P>&nbsp;</P>
  <P>&nbsp;</P>
  <P>&nbsp;</P>
  <P><IMG src="images/bottom.jpg" width="969" height="107"></P>
  <P>&nbsp;</P>
</FORM>

</HTML>

用户名密码验证

  • 效果

  • 源代码

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    <SCRIPT language="JavaScript">
  //validate Name
  function checkUserName() {
    var fname = document.myform.txtUser.value;
    if (fname.length != 0) {
      for (i = 0; i < fname.length; i++) {
        var ftext = fname.substring(i, i + 1);
        if (ftext < 9 || ftext > 0) {
          alert("名字中包含数字 \n" + "请删除名字中的数字和特殊字符");
          return false
        }
      }
    }
    else {
      alert("未输入用户名 \n" + "请输入用户名");
      return false
    }
    return true;
  }
  function passCheck() {
    var userpass = document.myform.txtPassword.value;
    if (userpass == "") {
      alert("未输入密码 \n" + "请输入密码");
      return false;
    }
    // Check if password length is less than 6 charactor.
    if (userpass.length < 6) {
      alert("密码必须多于或等于 6 个字符。\n");
      return false;
    }
    return true;
  }
  function validateform() {
    if (checkUserName() && passCheck())
      return true;
    else
      return false;
  }
</SCRIPT>
源代码
user_password.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>使用字符串</TITLE>
  <SCRIPT language="JavaScript">
    //validate Name
    function checkUserName() {
      var fname = document.myform.txtUser.value;
      if (fname.length != 0) {
        for (i = 0; i < fname.length; i++) {
          var ftext = fname.substring(i, i + 1);
          if (ftext < 9 || ftext > 0) {
            alert("名字中包含数字 \n" + "请删除名字中的数字和特殊字符");
            return false
          }
        }
      }
      else {
        alert("未输入用户名 \n" + "请输入用户名");
        return false
      }
      return true;
    }
    function passCheck() {
      var userpass = document.myform.txtPassword.value;
      if (userpass == "") {
        alert("未输入密码 \n" + "请输入密码");
        return false;
      }
      // Check if password length is less than 6 charactor.
      if (userpass.length < 6) {
        alert("密码必须多于或等于 6 个字符。\n");
        return false;
      }
      return true;
    }
    function validateform() {
      if (checkUserName() && passCheck())
        return true;
      else
        return false;
    }
  </SCRIPT>
</HEAD>

<body>
  <FORM name="myform" method="post" action="reg_success.htm" onSubmit="return validateform()">
    <P><IMG src="images/reg_back1.jpg" width="979" height="195"></P>
    <P>&nbsp;</P>
    <TABLE border="0" align="center">
      <TR>
        <TD>用户名： </TD>
        <TD colspan="2"><INPUT name="txtUser" type="text" id="txtUser">
          *必填</TD>
      </TR>
      <TR>
        <TD>密&nbsp;&nbsp;码：</TD>
        <TD colspan="2"><INPUT name="txtPassword" type="password" id="txtPassword">
          *必填</TD>
      </TR>
      <TR>
        <TD colspan="3" align="center">
          <P>&nbsp;
          </P>
          <P>
            <INPUT name="clearButton" type="reset" id="clearButton" value="  清 空  ">
            <INPUT name="registerButton" type="submit" id="registerButton" value="  登  录  ">
          </P>
        </TD>
      </TR>
    </TABLE>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P><IMG src="images/bottom.jpg" width="969" height="107"></P>
    <P>&nbsp;</P>
  </FORM>
</body>

</HTML>

文本框

如何实现如下图所示，完善电子邮件的例子。

文本框

名 称 说 明
value 设置或获取文本框的值
focus( ) 获得焦点
select( ) 选中文本内容，突出显示输入区域
onFocus 光标进入某个文本框脚本运行
onBlur 文本框失去焦点脚本运行
onKeyPress 当一个键按下并释放时去触发一个事件

  • 效果

  • 源代码

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    <SCRIPT LANGUAGE="JavaScript">
  function clearText() {
    if (document.myform.txtEmail.value == "请输入真实的电子邮箱，我们将发送激活密码") {
      document.myform.txtEmail.value = "";
      document.myform.txtEmail.style.color = "red";
    }
  }
</SCRIPT>

<INPUT name="txtEmail" type="text" class="textBorder" id="txtEmail" 
  value="请输入真实的电子邮箱，我们将发送激活密码" size="40" 
  onFocus="clearText( )" style="color: #666666;">
源代码
email2.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>使用字符串</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
    function checkEmail() {
      var strEmail = document.myform.txtEmail.value;
      if (strEmail.length == 0) {
        alert("电子邮件不能为空!");
        return false;
      }
      if (strEmail.indexOf("@", 0) == -1) {
        alert("电子邮件格式不正确\n必须包含@符号！");
        document.myform.txtEmail.focus();
        document.myform.txtEmail.select();
        return false;
      }
      if (strEmail.indexOf(".", 0) == -1) {
        alert("电子邮件格式不正确\n必须包含.符号！");
        document.myform.txtEmail.focus();
        document.myform.txtEmail.select();
        return false;
      }
      return true;
    }

    function clearText() {
      if (document.myform.txtEmail.value == "请输入真实的电子邮箱，我们将发送激活密码") {
        document.myform.txtEmail.value = "";
        document.myform.txtEmail.style.color = "red";
      }
    }
  </SCRIPT>

  <STYLE type="text/css">
    <!--
    .textBorder {
      border: 1px solid;
      font-size: 15px;
    }
    -->
  </STYLE>
</HEAD>

<body>
  <FORM name="myform" method="post" action="reg_success.htm" onSubmit="return checkEmail( )">
    <P><IMG src="images/reg_back1.jpg" width="979" height="195"></P>
    <P>&nbsp;</P>
    <TABLE width="559" border="0" align="center">
      <TR>
        <TD>登录名：</TD>
        <TD colspan="2"><INPUT name="txtUserName" type="text" class="textBorder" id="txtUserName" size="40"></TD>
      </TR>
      <TR>
        <TD>您的电子邮件: </TD>
        <TD colspan="2"><INPUT name="txtEmail" type="text" class="textBorder" id="txtEmail" value="请输入真实的电子邮箱，我们将发送激活密码"
            size="40" onFocus="clearText( )" style="color: #666666;">
          *必填</TD>
      </TR>
      <TR>
        <TD colspan="3" align="center">
          <P>&nbsp;
          </P>
          <P>
            <INPUT name="clearButton" type="reset" id="clearButton" value="  清 空  ">
            <INPUT name="registerButton" type="submit" id="registerButton" value="  注  册  ">
          </P>
        </TD>
      </TR>
    </TABLE>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P>&nbsp;</P>
    <P><IMG src="images/bottom.jpg" width="969" height="107"></P>
    <P>&nbsp;</P>
  </FORM>
</body>

</HTML>