LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

Javascript自定义表单验证规则
admin
2012年3月12日 13:59 本文热度 2776
  2. 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文件，基本完全可以验证整个项目中需要验证的地方，而且规则都是自己定的，扩充性很强！

    • 该文章在 2012/3/12 13:59:07 编辑过
    关键字查询
    相关文章
    正在查询...
    点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
    点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。
    点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
    点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。
    Copyright 2010-2024 ClickSun All Rights Reserved