本文原创作品,如需转载请注明来源,作者:姜涛, towerjt@gmail.com
参考了一些其他人的代码,自己写了一个检验form数据合法性的js类
function ValidForm(formObj){
function validateOnChange(){
var textfield = this;
var pattern = textfield.getAttribute("pattern").toString();
var plen = pattern.length;
// alert(plen);
pattern = pattern.replace(/\//g,'');
// alert(pattern);
var value = this.value;
// alert(pattern+' '+value+' '+ value.search(pattern));
var required = textfield.getAttribute("required") != null;
if (!required && value.length==0){
textfield.className = "valid";
return;
}
if(value.search(pattern) == -1)
textfield.className = "invalid";
else
textfield.className = "valid";
};
this.form = formObj;
this.defaultRegExp = {
email : /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
cnPhone : /^(\d{3,4}-)\d{7,8}(-\d{1,6})?$/,
cnMobile : /^1[3,5]\d{9}$/,
yid : /^[a-z][a-z_0-9]{3,}(@yahoo\.cn)?$/,
date : /^\d{4}\-[01]?\d\-[0-3]?\d$|^[01]\d\/[0-3]\d\/\d{4}$|^\d{4}年[01]?\d月[0-3]?\d[日号]$/,
integer : /^[1-9][0-9]*$/,
number : /^[+-]?[1-9][0-9]*(\.[0-9]+)?([eE][+-][1-9][0-9]*)?$|^[+-]?0?\.[0-9]+([eE][+-][1-9][0-9]*)?$|^0$/,
currency : /^\d*(.\d{1,2})?$|^0$/,
alpha : /^[a-zA-Z]+$/,
alphaNum : /^[a-zA-Z0-9_]+$/,
urls : /^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/,
chinese : /^[\u2E80-\uFE4F]+$/,
postal : /^[0-9]{6}$/
};
this.bind = function(){
var needsValidation = false;
for(var j = 0;j < formObj.elements.length; j++){
var e = formObj.elements[j];
if(e.type != "text") continue;
var pattern = this.defaultRegExp[e.getAttribute("pattern")];
if (!pattern) pattern = e.getAttribute("pattern");
e.setAttribute("pattern", pattern);
var required = e.getAttribute("required") != null;
if(required && !pattern){
pattern = "\\S";
e.setAttribute("pattern", pattern);
}
if(pattern){
e.onchange = validateOnChange;
needsValidation = true;
}
}
//if(needsValidation) formObj.onsubmit = validateOnSubmit;
};
this.doValid = function(){
var invalid = false;
for(var i = 0; i < formObj.elements.length;i++){
var e = formObj.elements[i];
if(e.type == "text" && e.onchange == validateOnChange){
e.onchange();
if(e.className == "invalid")
{
invalid = true;
var tips = e.getAttribute("tips");
if (!tips) tips = "输入数据非法";
alert('提示 :' + tips);
return false;
}
}
}
return true;
};
}
使用方法
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=GBK"></head>
<body>
<script src="validate_obj.js" ></script>
<style>
input.invalid{background: #faa;}
input.valid{background: #afa;}
</style>
<form id="form1" name="form1">
name : <input type="text" name="name" required tips="名字非空"><br>
email: <input type="text" name="email" pattern="email" tips="邮件地址:towerjt@gmail.com"><br>
zipcode : <input type="text" name="zipcode" pattern="^\s*\d{5}\s*$"><br>
unvalidate : <input type="text"><br>
<input type="submit" value="submit query">
</form>
<script language="javascript">
var vf = new ValidForm(document.getElementById('form1'));
vf.bind();
</script>
<input type="button" value="增加" onClick="alert(vf.doValid());"/>
</body>
</html>
分享到:
相关推荐
在form表单上添加一个提交事件调用验证数据方法 <form name="listform" action="resume-doAdd" method="post" onsubmit="return Validator.Validate(this,3);"> 请输入正确的手机号!" requiremsg="移动电话不能为...
form数据与json对象的互相转换(完整版) * 将web Form 的数据转化成json字符串 * 将json对象的值解析后填入web Form 在AJAX开发中这是关键技术: 1、将form中的数据利用本工具转换成json格式的字符串,再通过ajax传...
在一个jsp页面中,定义了一个用户登录界面(以form表单定义),但要达到检验输入的信息的合法性,就需要对输入的用户信息作判断,那么自然就需要取出其中的值。有的页面可以用action传参来得到form中输入的信息值,...
使用JQuery实现从JSON对象转换为form提交数据
js实现form表单自动回显功能
如果表单域有很多,逐个提取很麻烦,使用这个封装好的可以整体获取,也就是能使用form-serialize库获取整体表单数据。获取的有两种返回值,一种是查询字符串,一种是对象。
孙维琴老师struts1书中代码,一个Form数据拆分到不同的jsp中。实现方式struts+hibernate。数据脚本齐全。
form 不提交数据form 不提交数据
本文实例讲述了JS提交form表单。分享给大家供大家参考,具体如下: 一、javascript 页面加裁时自动提交表单: Form表单: <form method="post" id="myform" action="a.php"> <input type="submit" value=...
jquery.form.js jquery.form.js
现在我就从一个最简单最实用的一个小例子出发分析一下Delegate的使用。 现在有两个窗体Form1和Form2。 两个按钮Button1(Form)和Button2(Form2)。 Form1的代码: private void button1_Click(object sender, ...
Delphi获取Form数据,在开发过程中可能需要获取Form中各个控件信息以确定对按钮等事件的响应,该实例演示了如何获取Form中各种类型的数据。
jquery.form.min.js是一个异步提交表单的插件,使用该插件可以设置callback函数,并且页面不会跳转
Form验证框架 JSForm验证框架 JSForm验证框架 JS
jquery插件 利用json 绑定 form 表单数据
Js检验工具、常用js方法。。。。。。。。。。。。。。。。。。
Android Form EditText 验证输入合法性的编辑框.rar
前端数据使用MD5等规则加签提交,后端验签,使用formData,文件和参数同时提交,参数值可以包含中文及中文符号
如下所示: form表单ID:postform 设置表单请求url document.postform.action = SaveReturnInfo...以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了,希望大家多多支持软件开发网~
本文主要给大家介绍的是关于利用JS获取form表单数据的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下: 1.有的时候想偷点懒,页面上有大量的表单提交数据,每次单独获取都比较...