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,然后通过验证。
这里是成交提交之后跳转的链接!
写在最后:原创不易,觉得对自己有帮助的小老弟,欢迎点赞评论~~~