原生javaScript form表单数据验证
程序员文章站
2022-03-08 19:38:22
...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form id="form1" name="form1">
<input type="" name="name" value="z">
<input type="" name="age" value="8">
<input type="submit" name="submit">
</form>
<form id="form2" name="form2">
<input type="" name="width" value="">
<input type="" name="height" value="">
<input type="submit" name="submit">
</form>
</body>
<script type="text/javascript">
var forms = document.forms;
var form1 = forms.form1;
var form2 = forms.form2;
var rule1 = {
name:{
tipsMsg:'请输入姓名',
verification:function(value,el){
if(value === ''){
return true;
}
}
},
age:{
tipsMsg:'请输入年龄为20-40',
verification:function(value,el){
value = parseInt(value);
if(value < 20 || value > 40){
return true;
}
return false;
}
}
};
var rule2 = {
width:{
tipsMsg:'请输入宽度',
verification:function(value,el){
if(value === ''){
return true;
}
}
},
height:{
tipsMsg:'请输入宽度高 必须为160-190',
verification:function(value,el){
value = parseInt(value);
if(value < 160 || value > 190){
return true;
}
return false;
}
}
};
function verification(el,rule){
for(var name in rule){
if(rule[name].verification(el[name].value)){
alert(rule[name].tipsMsg);
return false;
}
}
return true;
}
form1.addEventListener('submit',function(){
verification(this,rule1);
},null)
form2.addEventListener('submit',function(){
verification(this,rule2);
},null)
</script>
</html>
上一篇： 基于规则的双向最大匹配算法的分词