开发总结--表单之验证

关于表单验证,网上很多,但是真正自己写的时候问题很多,所以这时你就需要一个适合新学者的表单验证方法,能让你快速的进行验证,不必要去摘抄别人自己都看不懂的代码,下面就为大家来总结几个常见的简单易上手的验证方式:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function beforesubmit() {
if (document.form1.zh.value == "") {
alert("请输入用户名!");
document.form1.zh.focus();
return false;
}
if (form1.zh.value.length < 6 || form1.zh.value.length > 20) {
alert("用户名应该在6-20之间!");
document.form1.zh.focus();
return false;
}
if (document.form1.mm.value == "") {
alert("请输入密码!");
document.form1.mm.focus();
return false;
}
if (document.form1.mm.value != document.form1.mm2.value) {
alert("两次输入密码不一致!");
document.form1.mm2.focus();
return false;
}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" onsubmit="return beforesubmit()">
<table width="400" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#ADD8E6">
<tr>
<td width="196">
<p align="right">账号:</p>
</td>
<td width="499">
<input name="zh" type="text" id="zh" />
</td>
</tr>
<tr>
<td>
<p align="right">密码:</p>
</td>
<td class="xinghao">
<input name="mm" type="password" id="mm" />
</td>
</tr>
<tr>
<td>
<p align="right">确认密码:</p>
</td>
<td class="xinghao">
<input name="mm2" type="password" id="mm2" />
</td>
</tr>
<tr>
<td></td>
<td>    </td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="Submit" value="确认" />
<input type="reset" name="Submit2" value="我重写" />
</td>
</tr>
</table>
</form>

</body>

</html>

///////////////////////////////////////////

以上这个也是我自己总结的验证方式,还有2个自己总结的,以后开发遇到了别的需要验证的,还会继续添加验证方式,现在是最简单比较适合新手的验证方式,自己可以去揣摩

下边跟上边的编码格式是一样的,没有太大的区别

var re = /^(13[0-9]{9})|(15[89][0-9]{8})$/;
if (!re.test(document.tijiao.shoujinum.value)) {
alert('请输入正确的手机号码');
document.tijiao.shoujinum.focus();
return false;
};
var patten = new RegExp(/^[0-9]+$/);
if (!patten.test(document.tijiao.num.value)) {
alert("请输入数字");
document.tijiao.num.focus();
return false;
}

///以上都是自己开发中用到过的,不会存在出现错误的情况,如果出现,请检查字幕的拼写或者传参是否正确///

posted @ 2016-02-22 10:37  绿罗兰  阅读(269)  评论(0编辑  收藏  举报