您的位置：首页 > Web前端 > JavaScript

用JavaScript实现form表单的数据提交--使用正则表达式对数据判断

2016-12-03 13:14 1006 查看

用JavaScript实现form表单的数据提交--使用正则表达式对数据判断：

运用JavaScript中正则表达式的相关知识；

正则表达式.html

作用：正则表达式相关知识

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
正则表达式的创建方式：
方式一：
/正则表达式/模式
方式二：
new RegExp("正则表达式",模式);

正则表达式对象常用的方法有两个：
test()方法：使用正则对象去匹配字符串，如果匹配成功返回true，否则返回false.
例子：
var str = "hello123";
var reg = /^[a-z0-9]+$/; //^表示开始，$表示结束
alert("匹配吗？"+reg.test(str));
exec()方法：根据正则表达式去查找字符串符合规则的内容.
例子：
var str = "da jia hao hao xue xi a";
var reg = /\b[a-z]{3}\b/gi; //  \b表示单词边界匹配器
var line = "";
while((line = reg.exec(str))!=null){
document.write(line+"<br/>");
}

模式：
g（全文查找出现的所有 pattern）
i（忽略大小写）
*/
var str = "da jia hao hao xue xi a";
var reg = /\b[a-z]{3}\b/gi; //  \b表示单词边界匹配器
var line = "";
while((line = reg.exec(str))!=null){
document.write(line+"<br/>");
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则表达式</title>
</head>

<body>
</body>
</html>

注意：form表单中的onsubmit事件的使用：

success.html

作用：表单数据验证提交的页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>success文档</title>
</head>

<body>
<h1><font color="#FF0000">恭喜你 ,提交数据成功</font></h1>
</body>
</html>

form.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//检查用户名
function checkName(){
var inputNode = document.getElementById("userName");
var spanNode = document.getElementById("userId");
//获取输入框的内容
var content = inputNode.value;
//用户名的规则是：六位的英文字母与数字组成,数字不能开头
var reg = /^[a-z][a-z0-9]{5}$/i;
if(reg.test(content)){
spanNode.innerHTML = "正确".fontcolor("green");
return true;
}else{
spanNode.innerHTML = "错误".fontcolor("red");
return false;
}
}

//检查密码
function checkPass(){
var pwd = document.getElementById("pwd").value;
var spanNode = document.getElementById("passId");
var reg = /^[a-z0-9][a-z0-9]{7,16}$/i;
if(reg.test(pwd)){
spanNode.innerHTML = "正确".fontcolor("green");
return true;
}else{
spanNode.innerHTML = "错误".fontcolor("red");
return false;
}
}

//检查确认密码
function ensurePass(){
var ensurepwd = document.getElementById("ensurepwd").value;
var spanNode = document.getElementById("ensure");
var pass = document.getElementById("pwd").value;
if(pass == ensurepwd){
spanNode.innerHTML = "正确".fontcolor("green");
return true;
}else{
spanNode.innerHTML = "两次密码输入不一致".fontcolor("red");
return false;
}
}
//检查邮箱
function checkEmail(){
var email = document.getElementById("email").value;
var spanNode = document.getElementById("emailspan");

//编写邮箱的正则 123@qq.com  123@qq.net  123@qq.com.cn
var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i;  //\w表示单词字符 .表示任意一个字符，\.表示.
if(reg.test(email)){
spanNode.innerHTML = "正确".fontcolor("green");
return true;
}else{
spanNode.innerHTML = "错误".fontcolor("red");
return false;
}
}

//

function checkAll(){
var userName = checkName();
var email = checkEmail();
var pwd = checkPass();
var enpwd = ensurePass();
if(userName&&email&&pwd&&enpwd){
return true;
}else{
return false;
}
}
/*
onsubmit事件：
表单提交时会触发onsubmit事件的，如果onsubmit事件的方法返回的是true，那么该表单允许提价，为false不允许提交
*/
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form表单</title>
</head>

<body>
<form action="success.html" method="get" onsubmit="return checkAll()">
<!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交，如果返回的是true允许提交 -->
<table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">
<tr>
<td width="25%">姓名:</td>
<td>
<input type="text" name="userName" id="userName" onblur="checkName()"/>
<span id="userId"></span>
</td>
</tr>
<tr>
<td >密码:</td><td>
<input type="password"  name="pwd" id="pwd" onblur="checkPass()"/>
<span id="passId"></span>
</td>
</tr>
<tr>
<td>确认密码:</td><td>
<input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurePass()" />
<span id="ensure"></span>
</td>
</tr>
<tr>
<td>邮箱</td><td>
<input type="text" name="email" id="email" onblur="checkEmail()"/>
<span id="emailspan"></span>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="man" checked="ture" id="male"/>男
<input type="radio" name="sex" value="woman"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox"  name="like" value="eat"/>eat
<input type="checkbox" name="like" value="sleep"/>sleep
<input type="checkbox" name="like" value="play"/>play
<span id="hobbySpan"></span>
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="city" id="city">
<option value=""> 请选择</option>
<option value="bj"> 北京 </option>
<option value="gz"> 广州 </option>
<option value="sh"> 上海 </option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea cols="15" rows="5"  name="myInfo" id="myInfo"></textarea></td>
</tr>
<tr align="center">
<td colspan="2"><!--提交按钮-->
<input type="submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航