使用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);
} }
结果:
使用JavaScript实现简单的输入校验的更多相关文章
- JavaWeb框架_Struts2_(六)----->Struts2的输入校验
1. 输入校验章节目录 输入校验概述 客户端校验 服务器端校验 手动编程校验 重写validate方法 重写validateXxx()方法 输入校验流程 校验框架校验 Struts2 内置的校验器 常 ...
- Struts 2(五):输入校验 & 校验框架
第一节 Struts2输入校验 1.1 输入校验的重要性 输入校验分为客户端校验和服务器端校验.客户端校验用来过滤用户的错误操作,一般使用JavaScript代码实现.服务器端校验用来防止非法用户的恶 ...
- (十三)struts2的输入校验
输入校验是web应用必须处理的问题,要防止用户的误输入和恶意非法输入.struts2给我们提供了非常强大的输入校验体系. 输入校验分为客户端校验和服务器端校验.一般开发中两者都用,但是服务端校验必须使 ...
- Struts2的输入校验(1)——校验规则文件的编写
Struts2的输入校验(1) --校验规则文件的编写 Struts2提供了基于验证框架的输入校验,所有的输入校验只要编写配置文件,Struts2的验证框架将会负责进行服务器校验和客户端校验. 注: ...
- Struts2的输入校验
一.Struts2提供了基于验证框架的输入校验,在这种校验方式下,所有的输入校验只需要编写简单的配置文件,Struts2的验证框架将会负责进行服务器校验和客户端校验. 校验失败后将Struts2将自动 ...
- Struts2输入校验
1.编写校验规则文件 (<ActionName>-validation.xml),文件放在Action类文件相同的路径下校验失败返回input的result. <vali ...
- 【Struts2学习笔记(11)】对action的输入校验和XML配置方式实现对action的全部方法进行输入校验
在struts2中,我们能够实现对action的全部方法进行校验或者对action的指定方法进行校验. 对于输入校验struts2提供了两种实现方法: 1. 採用手工编写代码实现. 2. 基于XML配 ...
- Struts2框架(8)---Struts2的输入校验
Struts2的输入校验 在我们项目实际开发中在数据校验时,分为两种,一种是前端校验,一种是服务器校验: 客户端校验:主要是通过jsp写js脚本,它的优点很明显,就是输入错误的话提醒比较及时,能够减轻 ...
- struts2(四)之输入校验
前言 这个本来是昨天就写好的,但是不知道为什么没有保存成功!但是今天起来再写一遍就当巩固一下知识吧. 一.输入校验概述 在以前我们写一个登录页面时,并没有限制用户的输入,不管用户输入什么,我们都存入数 ...
随机推荐
- 关于flash player debugger 无法弹窗报错的解决办法
第一个是IE的插件, Download the Windows Flash Player 10.2 ActiveX control content debugger (for IE) (EXE, 2. ...
- Java_eclipse软件与git配合使用创建git仓库
一.在eclipse上安装git,和安装其他插件一样 help->Install new software->add... 在弹出框中输入name,location;点击-->ok ...
- java_类承继其他类的内部类例子
package ming; class Outer { class In { public In(String msg) { System.out.println(msg); } } } public ...
- 为laravel分页样式制定class
做的项目有一个上翻页和下翻页,使用了框架提供的
- 一天一个mysql函数(二) FIND_IN_SET()
in和FILD_IN_SET() 的区别: select id, list, name from table where FIND_IN_SET( 'daodao' , list) 所以如果list是 ...
- 关于通过adb启动Activity、activity、service以及发送broadcast的命令
一.启动activity: $ adb shell$ am start -n {包名}/{包名}.{活动名称} 如:启动一个名叫MainActivity的活动 # am start -n com.ex ...
- ESX虚拟机文件列表详解
http://jackiechen.blog.51cto.com/196075/210492 关闭状态时的文件列表: *-flat.vmdk:虚拟机的原始磁盘文件,包含整个虚拟机镜像. *.nvr ...
- Ubuntu 下安装VNC server
尽管我们在大部分情况下用ssh登录Ubuntu服务器就好了,但是有时候我们的程序需要在图形界面下运行,这时我们就要用到vnc server这个软件了.在Ubuntu下安装vnc server很简单的, ...
- A very hard Aoshu problem
A very hard Aoshu proble Problem Description Aoshu is very popular among primary school students. It ...
- ASP.NET MVC and jqGrid 学习笔记 1-基本配置
新建一个mvc项目后