自定义表单验证：
代码：
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<link rel="stylesheet" href="css/validator.css" type="text/css"></link>
<link rel="stylesheet" href="css/style.css" type="text/css"></link>
</HEAD>
<script type="text/javascript">
//form表单调用验证的信息
var object={};
object.onready=function(handler){
window.onload=handler;
}
handler=function(){
alert("提交前调用自己的函数");
return false;
}
object.onready(function(){
var v=new Validate(config);
v.register();
});
//配置验证属性
var config={form:"myForm",submit:handler,elements:[
{name:"userName",allownull:false,defaultMsg:"用户名不能为空",focusMsg:"请输入用户名",rightMsg:"恭喜你，用户名输入正确！",errorMsg:"抱歉，用户名输入不合法",tips:"userNameTip",regexp:/^\w{6,12}$/},
{name:"password",allownull:false,defaultMsg:"密码不能为空",focusMsg:"请输入密码",rightMsg:"恭喜你，密码输入正确！",errorMsg:"抱歉，密码输入不合法",tips:"passwordTip",regexp:/^\w{6,12}$/}
]};
//进行验证信息
Validate=function(config){
this.config=config;
this.form=document.getElementById(this.config.form);
this.register=function(){
var e=this.config.elements;
for(var i=0;i<e.length;i++){
this.form[e[i].name].onfocus=setFocusHandler(getEl(e[i].tips),e[i].focusMsg,"onfocus");
this.form[e[i].name].onblur=setBlurHandler(e[i]);
setText(getEl(e[i].tips),e[i].defaultMsg,"onshow");
}
this.form.onsubmit=submitHandler(this.form);
}
//得到Id
getEl=function(id){
return document.getElementById(id);
}
//设置提示文本
setText=function(obj,msg,image){
obj.className=image;
obj.innerHTML=msg;
}
//设置得到焦点提示文本
setFocusHandler=function(obj,msg,image){
return function(){
setText(obj,msg,image);
}
}
judgeInfoAllowNull=function(shuxing,value){
if(!value){ //没有填的情况
setText(getEl(shuxing.tips),shuxing.defaultMsg,"onshow"); //默认信息
}else{ //有填的情况
if(value.match(shuxing.regexp)){
setText(getEl(shuxing.tips),shuxing.rightMsg,"oncorrect"); //填写正确的情况
}else{
setText(getEl(shuxing.tips),shuxing.errorMsg,"onerror"); //填写不正确的情况
}
}
}
judgeInfoAllowNotNull=function(shuxing,value){
if(!value){ //没有填的情况
setText(getEl(shuxing.tips),shuxing.errorMsg,"onerror"); //错误信息
}else{ //有填的情况
if(value.match(shuxing.regexp)){
setText(getEl(shuxing.tips),shuxing.rightMsg,"oncorrect"); //填写正确的情况
}else{
setText(getEl(shuxing.tips),shuxing.errorMsg,"onerror"); //填写不正确的情况
}
}
}
//设置失去焦点时进行判断后提示文本
setBlurHandler=function(shuxing){
return function(){
var v=this.value;
if(shuxing.allownull){ //允许为null的情况
judgeInforAllowNull(shuxing,v);
}else{ //不允许为null的情况
judgeInfoAllowNotNull(shuxing,v);
}
}
}
submitHandler=function(f){
var c=this.config;
var isTrue=true;
return function(){
for(var i=0;i<c.elements.length;i++){
var shuxing=c.elements[i];
var value=f[shuxing.name].value;
if(shuxing.allownull){ //允许为null的情况
judgeInfoAllowNull(shuxing,value);
}else{ //不允许为null的情况
judgeInfoAllowNotNull(shuxing,value);
}
}
var handler=c.submit;
isTrue=handler();
return isTrue;
}
}
}
</script>
<BODY>
<form action="" method="POST" id="myForm" name="myForm">
<center>
<table>
<tr>
<td>用户名：</td><td><input type="text" name="userName" value="" width=80></input><span id="userNameTip"></span></td>
</tr>
<tr>
<td>密 码：</td><td><input type="text" name="password" value="" width=80></input><span id="passwordTip"></span></td>
<tr>
<td></td><td><input type="submit" name="submit" value="我要提交"><td>
</tr>
</table>
</center>
</form>
</BODY>
</HTML>
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
- 大小: 4.4 KB
分享到：
相关推荐
标题中的“自定义表单验证框架”指的是一个用于在Web应用程序中验证用户输入的自定义工具。这样的框架允许开发者根据业务需求制定特定的验证规则，提高应用的安全性和用户体验。表单验证是确保用户提交的数据符合...
在vue 2.0版本中使用vee-validate进行自定义表单验证，可以极大地简化验证过程，并提高表单的用户体验。下面将详细介绍使用vee-validate自定义表单验证的实例涉及到的关键知识点。 首先，安装vee-validate。可以...
在Web开发中，表单验证是必不可少的一部分...总之，自定义表单验证规则和错误信息能提升应用的用户体验，确保数据质量。通过结合前端和后端验证，以及利用现有的库和工具，开发者可以创建出高效、安全的表单验证系统。
自定义表单验证器的实现需要创建一个新的类或方法，该类或方法需要返回一个同步的验证函数。这个函数接收一个FormControl实例作为参数，然后对表单控件的值进行验证，并返回相应的验证结果。 我们通常利用Form...
Vue 使用 vux-ui 自定义表单验证遇到的问题及解决方法 Vue 使用 vux-ui 自定义表单验证遇到的问题及解决方法是近年来非常流行的一种前端开发技术，特别是在移动端开发中。vux-ui 是一个基于 Vue 的移动端 UI 组件库...
在本项目"activiti自定义表单demo"中，我们主要关注的是如何使用SpringBoot集成Activiti工作流引擎，实现自定义表单和流程。这个Demo提供了完整的代码示例，帮助开发者理解并应用到实际项目中。以下是相关知识点的...
在本文中，我们将深入探讨如何使用jQuery Validate插件实现自定义表单验证，特别是如何自定义一个验证方法。 首先，要使用jQuery Validate插件，你需要在页面中引入jQuery库以及jQuery Validate插件的JavaScript...
本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考，具体如下： Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox)，也实现了很多指令做为验证...
6. **表单验证**：layui提供了表单验证功能，可以方便地对用户输入进行校验，保证数据的正确性。 7. **自定义组件**：layui允许开发者根据需求自定义组件，扩展其功能，例如创建复杂表单控件或交互效果。 8. **...
7. **错误处理和验证**：自定义表单可能包含自定义的验证规则，确保用户输入的有效性。可以使用控件的Validating和Validated事件来实现这一点，或者创建自定义验证器类。 8. **国际化和本地化**：如果应用程序需要...
### 自定义表单设计思路详解 #### 一、概述 自定义表单系统的设计目标是为了更好地与现有的工作流系统相结合，提升工作效率与灵活性。本文档将深入探讨自定义表单设计的关键点及其实施策略。 #### 二、基础功能...
这里我们关注的是如何实现自定义表单验证并结合后端接口进行数据有效性检查。这个场景通常发生在需要确保输入的数据不仅满足基本的格式要求，还要在服务器端进行唯一性验证，例如防止用户名重复注册。 首先，我们来...
三、表单验证 在自定义表单中，验证是确保用户输入符合预设规则的关键步骤。这可以通过前端验证（JavaScript）或后端验证（服务器端语言如PHP、Java、Python等）来实现。前端验证可提高用户体验，但后端验证同样必不...
总的来说，"JAVA动态表单设计，自定义表单，自定义数据"涉及的技术栈包括Java后端开发、前端界面设计、数据库管理和RESTful API设计。通过以上各模块的协同工作，可以构建出一个高效、易用的动态表单系统，满足不同...
2. 自定义控件：除了.NET Framework提供的标准控件，自定义表单设计器可能还包括一些特定的自定义控件，这些控件可能具有特殊的功能或者外观，如数据绑定、验证规则等。 3. 设计时支持：为了在设计器中正确显示和...
现包含用户名、密码、密码一致性、电话、身份证、简单的空值验证... 可以自己很轻松地添加正则验证和自定义验证函数，调用方法简单方便 现在分享出来给大家参考