zhengqx123456 2011-01-13 18:12
浏览 237
已采纳

javascript标准验证

我有一个想法:
在html的标签上加一个自定义属性format、表示这个文本框的输入范围
/**

  • format格式設定
  • number:数字0-9 integer:整形
  • date:日期2010-10-12
  • mail:abc@163.com
  • double:実数12.35
  • */



    然后利用jquery的属性选择器分类选择出format为某一特定格式的元素、加上特定的验证规则
    例如:
    $(function(){
    $("[format=number]").keypress(function(){
    var regu=/[0-9]/;
    return regu.test(String.fromCharCode(event.keyCode));
    });
    $("[format=date]").keypress(function(){


    });
    $("[format=date]").keyup(function(){


    });
    $("[format=date]").keydown(function(){


    });
    $("[format=double]").keypress(function(){


    });

    $("[format=mail]").keypress(function(){


    });
    $("[format=mail]").keyup(function(){


    });
    $("[format=mail]").keydown(function(){


    });
    });
    这样页面打开时不同的format属性的文本框就有了不同的验证规则
    在此想抛砖引玉、希望大家集思广益、把这个功能完善起来
    比如:
    date型的文本框
    输入时每一个字符必须在0-9和/之间
    输入完后、日期必须正确、如果没通过规则检查、不准它失去焦点

  • 写回答

1条回答 默认 最新

  • mcgj 2011-01-14 12:31
    关注

    呵呵,,不必自定义、就使用原来的属性,例如:、在js中取出验证规则进行验证、然后给出提示。下面是自写的一个验证表单通用js、由于时间关系尚未完善、作为参考提供给你:

    //此js是验证规则是固定的:
    //如想使用form表单元素自己提供的验证规则:
    /*

    • 如需效验ip或密码、请将密码id设置为:password、确认密码id设置为:confirmPassword、ip的id设置为ip、效验代码默认将这3个元素id视为:password\confirmPassword\ip、或在效验代码中将这3元素id修改成你自己定义的元素id,否则将无法效验
    • */ //oForm:Form表单对象 、值: HTML表单 //minLength:最小长度 、值:大于0的整数 //maxLength:最大长度 、值:无穷大的整数 //isLength:是否效验最大、最小长度、值:true/false //isEmpty:是否效验是否为空值 、值:true/false //isSpecial是否效验是否包含特殊字符、值: true/false //isSpace:是否效验是否包含空格 、值:true/false //isNotEqual是否效验是否相等、值:true/false

    //isNumber是否效验全由数字组成、值:true/false
    //isDataFormat是否效验日期格式、值:true/false
    //isEmailFormat是否效验邮箱格式、值:true/false
    //isPhoneFormat是否效验手机格式、值: true/false
    //isPhoneTeleFormat是否效验电话格式、值: true/false
    //isWordMother是否效验全由字母组成、值:true/false
    //isMenword是否效验全由汉字组成、值:true/false
    //暂未效验日期、邮箱、手机、电话、字母、汉字或其他需求、如有需求可自行实行

    //倍数:用于设定textarea元素的字符最大长度,由于textarea元素有可能输入比较多的字符、所以使用自定义的最大长度maxLength乘倍数multiple、[maxLength * multiple]、默认自定义的最大长度maxLength的10倍
    var multiple = 10;

    //对比元素Value,例如:密码值
    var equalValue = "";

    //确认元素名称、例如:确认密码
    var confirmElementName = "confirmPassword";

    //IP元素名称、例如IP效验
    var ipElementName = "ip";

    //对比元素名称、用于和确认元素比较Value、例如:密码或新密码
    var equalElementName = "password";

    //对比和确认元素类型(默认:password)
    var equalElementType = "password";

    //调用
    //onsubmit="return checkForm(this,8,20,true,true,true,true,true,false,false,false,false,false,false,false)";
    //checkForm(oForm,minLength,maxLength,isLength,isEmpty,isSpecial,isSpace,isNotEqual,isNumber,isDataFormat,isEmailFormat,isPhoneFormat,isPhoneTeleFormat,isWordMother,isMenword)
    //根据指定需求效验表单所有元素、效验通过返回true否则false
    function checkForm(oForm,minLength,maxLength,isLength,isEmpty,isSpecial,isSpace,isNotEqual,isNumber,isDataFormat,isEmailFormat,isPhoneFormat,isPhoneTeleFormat,isWordMother,isMenword){
    var isStatus = false;
    var oElements = oForm.elements;
    for(var i=0;i<oElements.length;i++){
    var element = oElements[i];
    if(element.type!="hidden"){
    if(element.type=="text" || element.type=="password" || element.type=="file" || element.type=="hidden"){
    isStatus = checkTPHFT(element,minLength,maxLength,isLength,isEmpty,isSpecial,isSpace,isNotEqual,isNumber,isDataFormat,isEmailFormat,isPhoneFormat,isPhoneTeleFormat,isWordMother,isMenword);
    if(isStatus==false){
    break;
    }
    }else if(element.type=="textarea"){
    var tempMaxLength = maxLength * multiple;
    isStatus = checkTPHFT(element,minLength,maxLength,isLength,isEmpty,isSpecial,isSpace,isNotEqual,isNumber,isDataFormat,isEmailFormat,isPhoneFormat,isPhoneTeleFormat,isWordMother,isMenword);
    if(isStatus==false){
    break;
    }
    }else if(element.type=="checkbox" || element.type=="radio"){
    //暂未实现
    }else if(element.type=="select-one" || element.type=="select-multiple"){
    //暂未实现
    }else{
    //暂未实现
    }
    }
    }
    return isStatus;
    }
    //效验text、password、hidden、file、textarea元素
    function checkTPHFT(element,minLength,maxLength,isLength,isEmpty,isSpecial,isSpace,isNotEqual,isNumber,isDataFormat,isEmailFormat,isPhoneFormat,isPhoneTeleFormat,isWordMother,isMenword){
    var isStatus = false;
    if(isEmpty){
    isStatus = checkEmpty(element);
    if(isStatus==false){
    return isStatus;
    }
    }
    if(isLength){
    isStatus = checkLength(element,minLength,maxLength);
    if(isStatus==false){
    return isStatus;
    }
    }
    if(isNumber){
    isStatus = checkNumber(element);
    if(isStatus==false){
    return isStatus;
    }
    }
    if(isSpace){
    isStatus = checkSpace(element);
    if(isStatus==false){
    return isStatus;
    }
    }
    if(isSpecial){
    isStatus = checkSpecialChar(element);
    if(isStatus==false){
    return isStatus;
    }
    }
    if(isNotEqual){
    isStatus = checkNotEqual(element,minLength,maxLength);
    if(isStatus==false){
    return isStatus;
    }
    }
    if(isDataFormat){
    isStatus = checkDateFormat(element);
    if(isStatus==false){
    return isStatus;
    }
    }
    if(isEmailFormat){
    isStatus = checkEmailFormat(element);
    if(isStatus==false){
    return isStatus;
    }
    }
    if(isPhoneFormat){
    isStatus = checkPhoneFormat(element);
    if(isStatus==false){
    return isStatus;
    }
    }
    if(isPhoneTeleFormat){
    isStatus = checkTelephoneFormat(element);
    if(isStatus==false){
    return isStatus;
    }
    }
    if(isWordMother){
    isStatus = checkWordMother(element);
    if(isStatus==false){
    return isStatus;
    }
    }
    if(isMenword){
    isStatus = checkManWord(element);
    if(isStatus==false){
    return isStatus;
    }
    }
    return isStatus;
    }

    //效验是否全由数字组成
    function checkNumber(element){
    var rule = "/^\d+$/";
    if(!element.value.match(rule)){
    //alert("你好! "+element.lang+"只能是数字!不能包含其他字符!");
    alert("Hello! "+element.lang+" Only a number, can not contain other characters!");
    //getFocus(element);
    return false;
    }else{
    return true;
    }
    }

    //效验密码是否不相等
    function checkNotEqual(element,minLength,maxLength){
    var isStatus = false;
    isStatus = equalIsElement(element);
    if(isStatus==false){
    return isStatus;
    }
    return isStatus;
    }

    //效验元素类型是否为password并且元素id=confirmPassword
    function equalIsElement(element){
    if(element.type==equalElementType && element.name==equalElementName){
    equalValue = element.value;
    }
    var isStatus = false;
    if(element.type==equalElementType && element.name==confirmElementName){
    isStatus = equalElement(element,equalValue);
    if(isStatus==false){
    return isStatus;
    }
    }else{
    isStatus = true;
    }
    return isStatus;
    }

    //比较2个值是否相等
    function equalElement(element,elementValue){
    if(element.value!=elementValue){
    //alert("你好!你输入的"+element.lang+"和密码不一致 请重新输入!");
    alert("Holle! You type "+element.lang+" And inconsistent Please re-enter the password!");
    return false;
    }else{
    return true;
    }
    }

    //效验最大、最小长度
    function checkLength(element,minLength,maxLength){
    if(element.value.length < minLength || element.value.length > maxLength){
    //alert("你好!"+element.lang+"长度必须大于"+minLength+"位小于"+maxLength+"位!请重新输入!");
    alert("Hello! "+element.lang+" Length must be greater than "+minLength+"Bit Less than "+maxLength+" Bit Please re-enter!");
    //getFocus(element);
    return false;
    }else{
    return true;
    }

    }

    //效验是否为空值
    function checkEmpty(element){
    if(element.value=="" || element.value==null){
    //alert("你好!"+element.lang+"不能为空_是必填项_请认真填写!");
    alert("Hello! "+element.lang+" Can not be empty is required please fill in!");
    //getFocus(element);
    return false;
    }else{
    return true;
    }
    }
    //效验是否包含空格
    function checkSpace(element){
    if(element.value.indexOf(' ')>=0){
    //alert("你好!"+element.lang+"不能是空格_且不能包含空格_是必填项_请认真填写!");
    alert("Hello! "+element.lang+" Can not be blank And can not contain spaces Is required Please fill in!");
    //getFocus(element);
    return false;
    }else{
    return true;
    }
    }

    //效验是否包含特殊字符
    function checkSpecialChar(element){
    var specialChars = new Array("","~","!","@","#","$","%","^","&","*","(",")","-","_","=","+","\\","|",";",":","'",",","<",".",">","/","?");
    if(element.id=ipElementName){
    specialChars = new Array("
    ","~","!","@","#","$","%","^","&","*","(",")","-","_","=","+","\","|",";",":","'",",","<",">","/","?");
    }
    var retuenChar = "";
    for(var i=0;i if(element.value.indexOf(specialChars[i])>=0){
    retuenChar += specialChars[i];
    }else if(element.value.indexOf('"')>=0){
    retuenChar += '"';
    }else{
    }
    }
    if(retuenChar.length>0){
    //alert("你好!"+element.lang+"不能包含特殊字符: "+retuenChar);
    alert("Hello! "+element.lang+" Not contain special characters: "+retuenChar);
    //getFocus(element);
    return false;
    }else{
    return true;

    }

    }

    //【扩展函数】获取元素值、由于checkForm函数中直接使用元素、未使用到此函数、
    function getElementsValue(element){
    //取得表单元素的类型
    var sType = element.type;
    switch(sType) {
    case "text":
    case "hidden":
    case "password":
    case "file":
    case "textarea": return element.value;
    case "checkbox":
    case "radio": return getRadioCheckboxValue(element);
    case "select-one":
    case "select-multiple": return getSelectValue(element);
    }
    //取得radio,checkbox的选中数,用"0"来表示选中的个数
    function getRadioCheckboxValue(element){
    var sValue = "";
    //取得第一个元素的name,搜索这个元素组
    var tmpels = document.getElementsByName(element.name);
    for(var i=0;i<tmpels .length;i++){
    if(tmpels[i].checked){
    sValue += "0";
    }
    }
    return sValue;
    }
    //取得select的选中数,用"0"来表示选中的个数
    function getSelectValue(element){
    var sValue = "";
    for(var i=0;i<element.options.length;i++){
    if(element.options[i].selected && element.options[i].value!=""){
    sValue += "0";
    }
    }
    return sValue;
    }
    }

    //【扩展函数】获取元素焦点,由于checkForm函数中直接使用元素、未使用到此函数、
    function getFocus(element)
    {
    var sType = element.type;
    switch(sType){
    case "text":
    case "hidden":
    case "password":
    case "file":
    case "textarea": element.focus();var rng = element.createTextRange(); rng.collapse(false); rng.select();
    case "checkbox":
    case "radio": var oElements = document.getElementsByName(element.name);oElements[0].focus();
    case "select-one":
    case "select-multiple":element.focus();
    }
    }

    //效验是否全由汉字组成
    function checkManWord(element){
    //暂未实现
    return true;
    }

    //效验是否全由字母组成
    function checkWordMother(element){
    //暂未实现
    return true;
    }

    //效验邮箱格式[简单验证]
    function checkEmailFormat(element){
    var isStatus = false;
    var start_index = element.value.indexOf("@");
    var end_index = element.value.lastIndexOf("@");
    var last_Index = element.value.lastIndexOf(".");
    var value_ = element.value.substring(last_Index+1);
    if(start_index==end_index){
    isStatus = true;
    }else{
    isStatus = false;
    }
    if(start_index<last_Index){
    isStatus = true;
    }else{
    isStatus = false;
    }
    if(value_=="com" || value_=="cn" || value_=="net"){
    isStatus = true;
    }else{
    isStatus = false;
    }
    if(isStatus){
    return isStatus;
    }else{
    //alert("你好!你输入的 "+element.lang+" 格式不正确!请重新输入!正确格式: aaaaaaaa@163.com ");
    alert("Hello! You Type "+element.lang+" Please re-enter the correct format correct format: aaaaaaaa@163.com ");
    return isStatus;
    }
    }

    //效验电话格式
    function checkTelephoneFormat(element){
    //暂未实现
    return true;
    }

    //效验手机格式
    function checkPhoneFormat(element){
    //暂未实现
    return true;
    }

    //效验日期格式
    function checkDateFormat(element){
    //暂未实现
    return true;
    }

    //重置所有表单所有元素value
    function resetElementValue(){
    var forms = document.forms;
    for(var i=0;i<forms.length;i++){
    var form = forms[i];
    var elements = form.elements;
    for(var v=0;v<elements.length;v++){
    var element = elements[v];
    if(element.type=="text" || element.type=="password" || element.type=="file" || element.type=="textarea"){
    element.value="";
    }else if(element.type=="checkbox" || element.type=="radio"){
    //暂未实现
    }else if(element.type=="select-one" || element.type=="select-multiple"){
    //暂未实现
    }else{
    //暂未实现
    }
    }
    }
    }

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?