HTML (4) JS实现表单验证

最新推荐文章于 2024-07-09 17:01:34 发布

Android摸鱼工程师

最新推荐文章于 2024-07-09 17:01:34 发布

阅读量3.7k

点赞数 3

文章标签：表单验证正则表达式的应用 JS

本文链接：https://blog.csdn.net/m0_37293461/article/details/80360695

版权

前端世界专栏收录该内容

9 篇文章 1 订阅

订阅专栏

JavaScript的功能很强大，在网页中被广泛使用。
表单验证也是最常使用JS的，下面我们来实现一下。
先写一个register.html
//上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>

</head>
<body>
<form action="registersuccess.html" method="post" onsubmit="return checkForm();">
   <table width="850px" border="0" cellspacing="0">
      <tr>
       <td style"text-align:right">会员名：</td>
     <td>
       <input type="text" class="textinput"
        id="username" name="username" onkeyup="checkUsername();"/>
    </td>
      <td colspan="2"><span id="usernameMsg"></span>
         <font color="#999999">字母数字下划线1到10位，不能是数字开头</font>
      </td> <br/>
    </tr> 
     <tr>
      <td style"text-align:right">密码：</td>
     <td>
        <input type="password" class="textinput"
        id="password" name="password" onkeyup="checkPassword();"/>
     </td>
        <td colspan="2"><span id="passwordMsg"></span>
         <font color="#999999">密码设置6-11位字符</font>
        </td>
       </tr>
    </table>
  <table width="70%" border="0" cellspacing="0">
      <tr>
       <td style="padding-top: 20px; text-align: left">
		 <input type="image" src="image/signup.gif" name="submit" border="0"/>
       </td>
      </tr>
  </table>
</form>
</body>
  <script type="text/javascript" src="JS/form.js"></script>
</html>

再上一个登陆成功的registersuccess.html
//上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <center>
	    <font color="green" size="7">注册成功</font>
	</center>
</body>
</html>

最后用JS来验证表单，其中用到正则表达式。其中用到的语法和流程代码都有详细介绍！
//上代码：

//定义全局变量来接受标记对象
var usernameObj;
var passwordObj;

var usernameMsg;
var passwordMsg;

//获取标记对象
window.onload = function() {	
    //获取输入控件的标记对象
	usernameObj = document.getElementById("username");
	passwordObj = document.getElementById("password");
    //获取错误信息的标记对象
	usernameMsg = document.getElementById("usernameMsg");
	passwordMsg = document.getElementById("passwordMsg");
};

//验证整个表单
function checkForm() {			
	var bUsername = checkUsername();
	var bPassword = checkPassword();
	return bUsername && bPassword;	// return false后, 事件将被取消
}

//验证用户名
function checkUsername() {		
	var regex = /^[a-zA-Z_]\w{0,9}$/;	// 字母数字下划线1到10位, 不能是数字开头（不分大小写）
	var value = usernameObj.value;      // 获取usernameObj中的文本
	
	var msg = "";						// 最后的提示消息, 默认为空
	if (!value)							// 如果用户名没填, 填了就是一个字符串可以当作true, 没填的话不论null或者""都是false
		msg = "用户名必须填写：";			// 改变提示消息
	else if (!regex.test(value))		// 如果用户名不能匹配正则表达式规则
		msg = "用户名不合法：";			    // 改变提示消息
	usernameMsg.innerHTML = msg;		// 将提示消息放入SPAN
	usernameObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";	// 根据消息结果改变tr的颜色
	return msg == "";					// 如果提示消息为空则代表没出错, 返回true
}

function checkPassword() {		// 验证密码
	var regex = /^.{6,16}$/;			// 任意字符, 6到16位
	var value = passwordObj.value;
	var msg = "";
	if (!value)
		msg = "密码必须填写：";
	else if (!regex.test(value))
		msg = "密码不合法：";
	passwordMsg.innerHTML = msg;
	passwordObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
	return msg == "";
}

最终的效果：
这里写图片描述
这里可以看到如果输入的会员名和密码不合法，就会出现右边的红色提示，且不允许提交表单。只有符合正则表达式里的要求，才能返回true，然后通过验证。

这里是成交提交之后跳转的链接！

写在最后：原创不易，觉得对自己有帮助的小老弟，欢迎点赞评论~~~

Android摸鱼工程师

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML (4) JS实现表单验证

JavaScript的功能很强大，在网页中被广泛使用。表单验证也是最常使用JS的，下面我们来实现一下。先写一个register.html //上代码：&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt;&amp;amp;lt;meta charset=&amp;quot;UTF-8&a
复制链接

扫一扫

专栏目录