`

自定义表单验证规则

 
阅读更多
1.自定义的表单验证属性:datatype,scriptPrompt,nomorethan,notnull;
这四个属性并非html元素所有,自定义的规则属性,简单介绍下:
datatype:要验证的数据类型;
scriptPrompt:验证不通过后的提示语;
nomorethan:不超过多少个字符;
notnull:是否是必填项("true" or "yes" 表示必填);

2.自定义验证规则checkForm(),用于表单提交的onsubmit="return checkForm();"属性中,当然也可以在js中验证;
主函数:
function checkForm() {
var ele = document.forms[0].elements;
for (i = 0; i < ele.length; i++) {
   if (ele[i].type == 'text' || ele[i].type == 'file'|| ele[i].type == 'textarea' || ele[i].type == 'password') {
    if (isNull(ele[i]) == false) {
     alert(ele[i].scriptPrompt + '不能为空!');
     ele[i].select()
     return false;
    }
    if (checkData(ele[i]) == false) {
     ele[i].select()
     return false;
    }
   }
}
return true;
}

3.主函数checkForm()中又有新函数:isNull(),checkData();
isNull()函数:
function isNull(o) {
if (o.notnull) {
   if ((o.notnull == "true" || o.notnull == "yes") && trim(o.value) == '') {
    return false;
   }
}
return true;
}
注:如果表单中,设置了notnull属性,就会接受该验证;

checkData()函数:该函数是任何自定义的数据类型,接受该验证:
function checkData(o) {
var datatype = o.datatype;
if (o.value.indexOf('\'') != -1) {
   alert(o.scriptPrompt + "请不要输入非法字符!\" \' \"");
   return false;
}
if (datatype == "number") {
   if (checkNumber(o) == false) {
    alert(o.scriptPrompt + "请输入正确的数字!");
    o.select();
    return false;
   }
}
if (datatype == "int") {
   if (isNumber(o.value) == false) {
    alert(o.scriptPrompt + "请输入正确的正整数!");
    o.select();
    return false;
   }
   if (parseInt(o.value) < parseInt(o.min) || parseInt(o.value) > parseInt(o.max)) {
    alert(o.scriptPrompt + "应该在" + o.min + "--" + o.max + "之间!");
    o.select();
    return false;
   }
}
if (datatype == "date") {
   if (!isDate(o.value)) {
    alert(o.scriptPrompt + "请输入正确的日期!");
    o.select();
    return false;
   }
}
if (datatype == "zh") {
   if (!checkZH(o.value)) {
    alert(o.scriptPrompt + "只允许输入汉字!");
    o.select();
    return false;
   }else{
    if (o.nomorethan != "") {
     if (getByteLen(o.value) > o.nomorethan) {
      alert(o.scriptPrompt + "最大长度" + (o.nomorethan) + ",已经输入了" + getByteLen(o.value) + "(中文长度为2)!");
      o.select();
      return false;
     }
    }
   }
}
if (datatype == "EString") {
   if (getByteLen(o.value) > o.value.length) {
    alert(o.scriptPrompt + "该输入框不能有中文字符!");
    o.select();
    return false;
   }
}
if (datatype == "String") {
   if (o.nomorethan != "") {
    if (getByteLen(o.value) > o.nomorethan) {
     alert(o.scriptPrompt + "最大长度" + (o.nomorethan) + ",已经输入了"+ getByteLen(o.value) + "(中文长度为2)!");
     o.select();
     return false;
    }
   }
}
if (datatype == "Email") {
   if (o.value != "") {
    return checkEmail(o.value);
   }
}
if (datatype == "Phone") {// 座机
   if (o.value != "") {
    return checkPhone(o.value, o.scriptPrompt);
   }
}
if (datatype == "MobilePhone") {// 手机
   if (o.value != "") {
    return checkMobilePhone(o.value);
   }
}
if (datatype == "Post") {//邮编
   if (o.value != "") {
    return checkPost(o);
   }
}
return true;
}
注:该函数内容很多,每个if条件都有一次验证,验证规则又是单独的js函数,完全自定义:
列出一部分:
/*
* 用途:检查输入的日期是否符合 yyyyMMdd 输入: value:字符串 返回: 如果通过验证返回true,否则返回false
*/
function isDate(value) {
if (value.length == 0)
   return true;
if (value.length != 8 || !isNumber(value))
   return false;
var year = value.substring(0, 4);
if (year > "2100" || year < "1900")
   return false;
var month = value.substring(4, 6);
if (month > "12" || month < "01")
   return false;
var day = value.substring(6, 8);
if (day > getMaxDay(year, month) || day < "01")
   return false;
return true;
}
/*
* 用途:检查输入的Email信箱格式是否正确 输入: strEmail:字符串 返回: 如果通过验证返回true,否则返回false
*/
function checkEmail(strEmail) {
var emailReg = /^[A-Za-z0-9]+@([A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
if (emailReg.test(strEmail)) {
   return true;
} else {
   alert("您输入的Email地址格式不正确!");
   return false;
}
}

/*
* 用途:检查输入的电话号码格式是否正确 输入: strPhone:字符串 返回: 如果通过验证返回true,否则返回false
*/
function checkPhone(strPhone, prompt) {
var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
var phoneRegWithArea1 = /^[0][1-9]{2,3}[0-9]{5,10}$/;
var phoneRegWithArea2 = /^[1][3][1-9]{1}[0-9]{8}$/;
var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
var prompt = "请输入正确的" + prompt + "!"
if (strPhone.length > 9) {
   if (phoneRegWithArea.test(strPhone) || phoneRegWithArea1.test(strPhone)
     || phoneRegWithArea2.test(strPhone)) {
    return true;
   } else {
    alert(prompt);
    return false;
   }
} else {
   if (phoneRegNoArea.test(strPhone)) {
    return true;
   } else {
    alert(prompt);
    return false;
   }
}
}
/**
* 验证手机格式
* @param {} strPhone
* @return {Boolean}
*/
function checkMobilePhone(strPhone) {
var pattern = /^[1]\d{10}$/;
var prompt = "您输入的手机号码格式不正确!"
if (!pattern.exec(strPhone)) {
   alert(prompt);
   return false;
}
}
/**
* 验证只能输入中文
* @param {} strName
* @return {Boolean}
*/
function checkZH(strName) {
var pattern = /^[\u4e00-\u9fa5]*$/;
if (!pattern.exec(strName)) {
   return false;
}
return true;
}

4.定义完成之后,每个需要验证的输入只要加上上面属性,表单提交的时候,就会先验证:
如:姓名(必须是中文,且最多10个字符即五个汉字):
<input name="name" type="text" scriptPrompt="姓名" notnull="true" datatype="zh" nomorethan="10" />

手机(必须通过"MobilePhone"的验证规则):
<input name="telMobile" datatype="MobilePhone" scriptPrompt="手机" nomorethan="20" type="text"/>

5.这样一个js文件,基本完全可以验证整个项目中需要验证的地方,而且规则都是自己定的,扩充性很强!
 
分享到:
评论

相关推荐

    表单验证自定义验证规则和错误信息

    在Web开发中,表单验证是必不可少的一部分...总之,自定义表单验证规则和错误信息能提升应用的用户体验,确保数据质量。通过结合前端和后端验证,以及利用现有的库和工具,开发者可以创建出高效、安全的表单验证系统。

    自定义表单验证框架

    标题中的“自定义表单验证框架”指的是一个用于在Web应用程序中验证用户输入的自定义工具。这样的框架允许开发者根据业务需求制定特定的验证规则,提高应用的安全性和用户体验。表单验证是确保用户提交的数据符合...

    activiti自定义表单demo.rar

    在本项目"activiti自定义表单demo"中,我们主要关注的是如何使用SpringBoot集成Activiti工作流引擎,实现自定义表单和流程。这个Demo提供了完整的代码示例,帮助开发者理解并应用到实际项目中。以下是相关知识点的...

    自定义表单Winform

    7. **错误处理和验证**:自定义表单可能包含自定义的验证规则,确保用户输入的有效性。可以使用控件的Validating和Validated事件来实现这一点,或者创建自定义验证器类。 8. **国际化和本地化**:如果应用程序需要...

    自定义表单设计思路.docx

    ### 自定义表单设计思路详解 #### 一、概述 自定义表单系统的设计目标是为了更好地与现有的工作流系统相结合,提升工作效率与灵活性。本文档将深入探讨自定义表单设计的关键点及其实施策略。 #### 二、基础功能...

    自定义表单的实现源代码

    在自定义表单中,验证是确保用户输入符合预设规则的关键步骤。这可以通过前端验证(JavaScript)或后端验证(服务器端语言如PHP、Java、Python等)来实现。前端验证可提高用户体验,但后端验证同样必不可少,以防...

    JAVA动态表单设计,自定义表单,自定义数据

    总的来说,"JAVA动态表单设计,自定义表单,自定义数据"涉及的技术栈包括Java后端开发、前端界面设计、数据库管理和RESTful API设计。通过以上各模块的协同工作,可以构建出一个高效、易用的动态表单系统,满足不同...

    js表单验证(含自定义)

    本文将深入探讨JavaScript(简称js)在表单验证中的应用,包括基础验证方法以及如何实现自定义验证。 一、JavaScript表单验证基础 1. 验证事件:在JavaScript中,我们可以监听表单的`submit`事件,当用户尝试提交...

    自定义表单设计器演示版源码(C#).rar.rar

    2. 自定义控件:除了.NET Framework提供的标准控件,自定义表单设计器可能还包括一些特定的自定义控件,这些控件可能具有特殊的功能或者外观,如数据绑定、验证规则等。 3. 设计时支持:为了在设计器中正确显示和...

    自定义表单初步设计文档

    自定义表单初步设计文档是针对电子政务和企业办公自动化(OA)系统中的一项关键功能进行的详细设计记录。在当前信息化高度发展的时代,自定义表单能力允许用户根据自身需求自由设定表单模板,极大地提高了工作效率和...

    vee-validate vue 2.0自定义表单验证的实例

    在vue 2.0版本中使用vee-validate进行自定义表单验证,可以极大地简化验证过程,并提高表单的用户体验。下面将详细介绍使用vee-validate自定义表单验证的实例涉及到的关键知识点。 首先,安装vee-validate。可以...

    自定义表单方案

    1. **表单定义管理**:这部分是自定义表单的核心,包括表单的基本信息(如名称、描述)管理,表单字段的定义,表单布局设计,数据验证规则,以及字段间的关联和子表单管理。表单字段定义时,需要设定字段名、类型、...

    自定义jquery easyui 验证

    通过自定义 jQuery EasyUI 的验证规则,我们可以根据实际需求创建更加灵活和高效的前端表单验证机制。以上介绍的验证规则涵盖了常见的表单验证场景,如中文验证、邮政编码验证、手机号码验证等。开发者可以根据自己...

    asp自定义表单,使用户可以自定义数据模型

    首先,"asp自定义表单"指的是在ASP应用中设计一个可配置的表单,用户可以根据需求定制表单字段、类型以及布局。这种功能通常通过后台数据库和前端交互实现,用户在前端界面选择或输入表单结构,然后这些信息被保存到...

    动易SW6.8自定义表单插件

    每个字段还可以设置必填、验证规则以及提示信息。 4. **表单样式**:部分插件可能提供自定义表单样式的功能,允许调整布局、颜色和字体等视觉元素,以适应网站的整体风格。 5. **数据管理**:提交的表单数据会存储...

    自定义表单(拖拽式表单)

    7. **事件处理与表单验证** formBuilder提供了丰富的事件接口,如`onFormBuild`和`onFormUpdate`,可以用来在表单创建或更新时执行自定义逻辑。同时,通过集成其他验证库,可以实现对用户提交的数据进行验证。 8. ...

    表单计时器 自定义表单

    自定义表单还能集成验证规则,确保输入数据的质量和准确性,同时可以通过添加按钮、图片或嵌入其他功能来增强用户体验。 在"FormdesignV3_0"这个文件中,我们可以推测这是一个表单设计软件或库的版本3.0,可能提供...

Global site tag (gtag.js) - Google Analytics