JavaScript表单验证和提交(结合正则表达式)

来源：互联网发布：国联证券软件下载编辑：程序博客网时间：2024/06/02 18:48

表单验证：
1> 在用户输入信息完成后，验证用户数据的数据是否符合某个要求，根据是否符合要求，提示不同的信息。
2>若用户输入的信息有一项不合格，则阻止表单提交。(注意:表单组件name属性值为非空时表单递交才能将组件的value值传出去.

所以一般添加表单组件时最好加上name属性,给组件一个名字,以便于表单提交传值成功)

3>如何阻止表单的提交：
<form action="xxx" onsubmit="return false;">
</form>

实例:

希望实现如下界面效果:

源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>js02.html</title><script type="text/javascript">function checkName(){//1. 获取文本框的值 var name=document.getElementById("name").value;//2. 验证格式是否合法//3. 根据不同的验证结果  提示不同的信息var span=document.getElementById("name_msg");//使用正则表达式验证 var exp=/^\w{8,15}$/;if(exp.test(name)){//合格span.style.color="green";span.innerHTML="格式正确";return true;}else{//不合格span.style.color="red";span.innerHTML="格式错误(单词字符[8,15])";return false;}}function checkPwd(){//1. 获取文本框的值 var pwd=document.getElementById("pwd").value;//2. 验证格式是否合法//3. 根据不同的验证结果  提示不同的信息var span=document.getElementById("pwd_msg");var exp=/^\d{6}$/;if(exp.test(pwd)){//合格span.style.color="green";span.innerHTML="格式正确";return true;}else{//不合格span.style.color="red";span.innerHTML="格式错误(6位数字)";return false;}}function checkForm(){return checkName() && checkPwd();}</script></head><body><h1>登录</h1><form action="login.do"  onsubmit="return checkForm();">账号：<input onblur="checkName()" type="text"  id="name" /><span id="name_msg"></span><br/><br/>密码：<input onblur="checkPwd()" type="password" id="pwd"/><span id="pwd_msg"></span><br/><br/><input type="submit" value="登录"/></form></body></html>

0 0