使用JavaScript实现简单的输入校验

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

HTML页面代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title> <script type="text/javascript" src="04.js" charset="GBK"></script>
</head>
<body>  <form action="" id="a">
<br/>
姓名：<input id="" name="name" type="text" ><br/>
密码：<input id="" name="pass" type="text"/><br/>
年龄：<input id="" name="age" type="text"/><br/> <input id="" name="" type="button" value="检查" onclick="checkForm();"/>
</form>
<script type="text/javascript">
var checkForm = function () {
//指明要各个字段要校验的规则
check ("a" , {
"name":"required", //必填
"pass":{type:"regex",expr:/\w{4,8}/}, //符合指定的正则表达式，这里正则表达式的规则是字符长度要在4到8之间
"age":"int" //输入的必须为整数
});
}
</script>
</body>
</html>

04.js代码：

//为String添加一个去除空格的方法：
String.prototype.trim = function(){
return this.replace(/^\s+/,"").replace(/\s+$/,"");
} //错误信息对象
var errMsg = {
"required":"必须填写",
"int":"必须是一个整数",
"regex":"必须符合要求的格式"
} var check = function(formid , fields) //fields 参数的形式：{表单控件：要满足的规则}
{
var errResult = ""; var targetForm = document.getElementById(formid);
//fieldName一次代表fields对象里的每个key
for (var fieldName in fields )
{
//alert(fieldName);
//根据表单的控件的名称来获取相应的表单控件的值 var fieldValue = targetForm.elements[fieldName].value;
//alert(fieldValue);
//获取每个表单域应该满足的规则 var rule = fields[fieldName]; //rule可能是字符串或者json对象
//如果规则是字符串
if(typeof rule == "string")
{
switch(rule)
{
case "required":
if(!fieldValue || fieldValue.trim() == "")
{
errResult += ( fieldName + " :" +errMsg["required"]+"\n") ;
}
break;
case "int":
if(fieldValue && fieldValue!=null && fieldValue.trim() != "")
{
if (isNaN(parseInt(fieldValue))) //如果不是整数
{
errResult += ( fieldName + " :" +errMsg["int"]+"\n") ;
}
}
else
{
errResult += ( fieldName + " :" +errMsg["required"]+"\n") ; //"int"校验也必须为必填
}
break;
} } //为json对象
else
{
switch(rule.type)
{
case "regex":
if(fieldValue && fieldValue!=null && fieldValue.trim() != "")
{
var reg = eval(rule.expr); //将字符串转为正则表达式
var result = reg.exec(fieldValue);//执行正则表达式，得到结果
if(!result)
{
errResult += ( fieldName + " :" +errMsg["regex"]+"\n") ;
}
}
else
{
errResult += ( fieldName + " :" +errMsg["required"]+"\n") ;
}
break; }
}
} //显示错误信息
if(errResult != "")
{
alert(errResult);
} }