开发总结--表单之验证
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了开发总结--表单之验证相关的知识，希望对你有一定的参考价值。
关于表单验证，网上很多，但是真正自己写的时候问题很多，所以这时你就需要一个适合新学者的表单验证方法，能让你快速的进行验证，不必要去摘抄别人自己都看不懂的代码，下面就为大家来总结几个常见的简单易上手的验证方式：
<!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;
}
///以上都是自己开发中用到过的，不会存在出现错误的情况，如果出现，请检查字幕的拼写或者传参是否正确///
以上是关于开发总结--表单之验证的主要内容，如果未能解决你的问题，请参考以下文章