相关的事件就是onsubmit,写在form标签上面,当验证通过时,则提交数据,跳转页面;当验证不通过时,则不提交数据。
在这里,验证的数据为密码是否是六位纯数字,如果是,则提交数据并跳转页面;如果不是则给出如下提示:
点击链接可以查看:http://1833233.com/effect/submitverification/apptest.html
form表单如下:
<form action="apptest.html" method="post" onsubmit="return myFunction()">
<div class="user-name">
<span class="glyphicon glyphicon-user"></span>
<span class="input-name"><input type="text" placeholder="用户名" name="username"></span>
</div>
<div class="user-password user-name">
<span class="glyphicon glyphicon-lock"></span>
<span class="input-name"><input type="text" placeholder="密码" name="password" class="passwd-value"></span>
</div>
<div class="tip">请输入六位数字的密码!!!</div>
<div class="user-identity user-name">
<input type="radio" name="identity" value="student" checked="true" />学生
<input type="radio" name="identity" value="teacher" />老师
<input type="radio" name="identity" value="administrator" />管理员
</div>
<div class="user-submit user-name">
<input type="submit" value="登录" class="btn btn-default" />
</div>
</form>
οnsubmit=”return myFunction()”为验证事件,当函数返回true的时候点击提交按钮时才会提交;当函数返回true的时候,则不会提交;myFunction()内容如下:
<script>
var infoValueNode = document.querySelector(".passwd-value");
var tipNode = document.querySelector(".tip");
var identityNode = document.querySelector(".user-identity");
function myFunction() {
var value = infoValueNode.value; //获得输入框里面的值
console.log("value=", value);
var reg = /^\d{6}$/; //定义六位纯数字的正则表达式
var pattern = new RegExp(reg); //创建RegEXP实例
if (!pattern.test(value)) { //test方法是检测value值是否匹配正则表达式
infoValueNode.style.borderColor = "#F56C6C";
tipNode.style.display = "block";
identityNode.style.marginTop = "0px";
return false;
} else {
infoValueNode.style.borderColor = "#409eff";
tipNode.style.display = "none";
identityNode.style.marginTop = "21px";
}
}
</script>