• js 表单验证方式


    引用:http://www.iteye.com/topic/1117665

    // 在GBK编码里,除了ASCII字符,其它都占两个字符宽

    function get_bytes_length(str) {

    return str.replace(/[^\x00-\xff]/g, "xx").length;

    }

    //去除所有空格

    function trim(obj) {

    var not_valid = /\s/;

    while (not_valid.test(obj)) {

    obj = obj.replace(not_valid, "");

    }

    return obj;

    }

    //只能输入数字、字母、下划线

    function nlu(obj) {

    var valid = /^\w*$/;

    return (valid.test(obj));

    }

    //普通验证(obj:要验证的输入框的id;maxsize:可输入最大字符长度;isNull:是否为必填项)

    function check_obj1(obj, maxsize, isNull) {

    //获取输入框值

    var v = document.getElementById(obj).value;

    //是必填项

    if (isNull) {

    if (v == "") {

    document.getElementById("vd_" + obj).innerText = "不能空!";

    return false;

    }

    }

    //超过指定长度

    if (get_bytes_length(trim(v)) > maxsize) {

    document.getElementById("vd_" + obj).innerText = "\u53ea\u80fd\u8f93\u5165" + (maxsize / 2) +"\u4f4d\u4ee5\u5185\u7684\u4e2d\u6587\u6216" + maxsize + "\u4f4d\u4ee5\u5185\u82f1\u6587\u5b57\u7b26!";

    return false;

    }

    if(isNull){

    document.getElementById("vd_" + obj).innerText = "*";

    return true;

    }else{

    document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

    return true;

    }

    }

    //验证数字(obj:要验证的输入框的id;maxsize:可输入最大字符长度;isNull:是否为必填项;isNumber:是否只能输入数字)

    function check_obj2(obj, maxsize, isNull, isNumber) {

    //获取输入框值

    var v = document.getElementById(obj).value;

    //是必填项

    if (isNull) {

    if (v == "") {

    document.getElementById("vd_" + obj).innerText = "不能空!";

    return false;

    }

    }

    //超过指定长度

    if (get_bytes_length(trim(v)) > maxsize) {

    document.getElementById("vd_" + obj).innerText = "\u6700\u591a\u8f93\u5165" + maxsize + "\u4e2a\u6570\u5b57!";

    return false;

    }

    //只能是数字

    if (isNumber) {

    if (isNaN(v)) {

    document.getElementById("vd_" + obj).innerText = "\u53ea\u80fd\u8f93\u5165\u6570\u5b57!";

    return false;

    }

    }

    if(isNull){

    document.getElementById("vd_" + obj).innerText = "*";

    return true;

    }else{

    document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

    return true;

    }

    }

    //验证数字、字母、下划线(obj:要验证的输入框的id;maxsize:可输入最大字符长度;isNull:是否为必填项;isNLU:是否为数字、字母、下划线)

    function check_obj3(obj, maxsize, isNull, isNLU) {

    //获取输入框值

    var v = document.getElementById(obj).value;

    //是必填项

    if (isNull) {

    if (v == "") {

    document.getElementById("vd_" + obj).innerText = "\u4e0d\u80fd\u4e3a\u7a7a!";

    return false;

    }

    }

    //超过指定长度

    if (get_bytes_length(trim(v)) > maxsize) {

    document.getElementById("vd_" + obj).innerText = "\u53ea\u80fd\u8f93\u5165" + (maxsize / 2) +"\u4f4d\u4ee5\u5185\u7684\u4e2d\u6587\u6216" + maxsize + "\u4f4d\u4ee5\u5185\u82f1\u6587\u5b57\u7b26!";

    return false;

    }

    //只能是数字、字母、下划线

    if (isNLU) {

    if (!nlu(v)) {

    document.getElementById("vd_" + obj).innerText ="\u53ea\u80fd\u8f93\u5165\u6570\u5b57\u3001\u5b57\u6bcd\u3001\u4e0b\u5212\u7ebf!";

    return false;

    }

    }

    if(isNull){

    document.getElementById("vd_" + obj).innerText = "*";

    return true;

    }else{

    document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

    return true;

    }

    }

    //电话验证(obj:要验证的输入框的id;maxsize:可输入最大字符长度;isNull:是否为必填项)

    function check_obj4(obj, maxsize, isNull) {

    //获取输入框值

    var v = document.getElementById(obj).value;

    //是必填项

    if (isNull) {

    if (v == "") {

    document.getElementById("vd_" + obj).innerText = "\u4e0d\u80fd\u4e3a\u7a7a!";

    return false;

    }

    }

    var reg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;

    if(!reg.test(v)){

    document.getElementById("vd_" + obj).innerText = "格式错误!";

    return false;

    }

    //超过指定长度

    if (get_bytes_length(trim(v)) > maxsize) {

    document.getElementById("vd_" + obj).innerText = "\u53ea\u80fd\u8f93\u5165" + (maxsize / 2) +"\u4f4d\u4ee5\u5185\u7684\u4e2d\u6587\u6216" + maxsize + "\u4f4d\u4ee5\u5185\u82f1\u6587\u5b57\u7b26!";

    return false;

    }

    if(isNull){

    document.getElementById("vd_" + obj).innerText = "*";

    return true;

    }else{

    document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

    return true;

    }

    }

    //验证小数点(obj:要验证的输入框的id;maxsize:可输入最大字符长度;isNull:是否为必填项;floatsize:小数点后长度;)

    function check_obj5(obj, maxsize,isNull,floatsize) {

    //获取输入框值

    var v = document.getElementById(obj).value;

    //是必填项

    if (isNull) {

    if (v == "") {

    document.getElementById("vd_" + obj).innerText = "\u4e0d\u80fd\u4e3a\u7a7a!";

    return false;

    }

    }

    var counts=0;//是否有小数点

    var j,c;

    for(j=0;j<v.length;j++){

    c=v.charAt(j)

    if(( c >= '0' && c <= '9')||( c == ".")){

    if(c=='.'){

    counts++;

    }

    }else{

       document.getElementById("vd_" + obj).innerText = "只能输入数字和小数点!";

       return false;

    }

    }

    if(counts>=1){//存在小数点

    if(counts==1){//只有一个小数点时

    if(isNaN(v.substring(0,(maxsize-floatsize)))){

    document.getElementById("vd_" + obj).innerText = "小数点前面只能为数字!";

       return false;

    }else if(v.substring(0,v.indexOf('.')).length>(maxsize-floatsize)){

       document.getElementById("vd_" + obj).innerText = "小数点前面只能为"+(maxsize-floatsize)+"位数字!";

       return false;

    }else if(v.substring(v.indexOf('.')+1).length>floatsize){

    document.getElementById("vd_" + obj).innerText = "小数点后面只能为"+floatsize+"位数字!";

       return false;

    }else if(v.length>(maxsize+1)){

    document.getElementById("vd_" + obj).innerText = "长度超过范围!";

    return false;

    }else{

    if(isNull){//必填项显示星号

    document.getElementById("vd_" + obj).innerText = "*";

    return true;

    }else{//否则显示输入正确

    document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

    return true;

    }

    }

    }else{//存在多个小数点时

    document.getElementById("vd_" + obj).innerText = "小数点多了!";

    return false;

    }

    }else{//不存在小数点

    if(v.length>(maxsize-floatsize)){

    document.getElementById("vd_" + obj).innerText = "小数点前面只能为" + (maxsize-floatsize) + "位数字!";

    return false;

    }else{

    if(isNull){//必填项显示星号

    document.getElementById("vd_" + obj).innerText = "*";

    return true;

    }else{//否则显示输入正确

    document.getElementById("vd_" + obj).innerHTML = "<font color='green'>\u8f93\u5165\u6b63\u786e!</font>";

    return true;

    }

    }

    }

    }

    //密码验证

    function obj1_equals_obj2(obj1,obj2){

    var v1 = document.getElementById(obj1).value;

    var v2 = document.getElementById(obj2).value;

    if(v1!=v2){

    document.getElementById("vd_" + obj2).innerText = "两次密码不一致!";

     return false;

    }else{

    document.getElementById("vd_" + obj2).innerText = "*";

    return true;

    }

    }

     
     
     
    用法举例:
    //客户名称
    $("#customerId").keyup(function validate_customerId(){
      return check_obj1("customerId",6,true);
    });
     
    //本次合计应付款额
    $("#mustpay").keyup(function validate_mustpay(){
       return check_obj5("mustpay",16,true,2);
    });
     
     
     
    ////////////////////////////////批量验证//////////////////////////////////
    $(function validate_detail(){
    var false_count=0;//记录不合法数据数量
     
    //委托单号
    $("input[title='委托单号']").each(function(i){
    $("#deliverscatbill"+(i+1)).keyup(function validate_capPlancontactH(){
    return check_obj1("deliverscatbill"+(i+1),20,true);
    });
    if(!validate_capPlancontactH()){
    false_count=false_count+1;
    }
    });
     
    //车号
    $("input[title='车号']").each(function(i){
    $("#vehicleId"+(i+1)).keyup(function validate_vehicleId(){
    return check_obj1("vehicleId"+(i+1),10,true);
    });
    if(!validate_vehicleId()){
    false_count=false_count+1;
    }
    });
     
    //应付运费
    $("input[name='cdItem.mustpay']").each(function(i){
    $("#mustpay"+(i+1)).keyup(function validate_mustpay(){
    return check_obj5("mustpay"+(i+1),16,true,2);
    });
    if(!validate_mustpay()){
    false_count=false_count+1;
    }
    });
     
    if(false_count>0){//只要存在不合法数据就返回假,否则返回真
    return false;
    }else{
    return true;
    }
    });
  • 相关阅读:
    Confluence 6 从一个备份中获得文件附件
    Confluence 6 从其他备份中恢复数据
    Confluence 6 从生产环境中恢复一个测试实例
    从 Confluence 5.3 及其早期版本中恢复空间
    Confluence 6 恢复一个空间的问题解决
    Confluence 6 从一个 XML 备份中导入一个空间
    Confluence 6 恢复一个空间
    Confluence 6 恢复一个站点有关使用站点导出为备份的说明
    网易蜂巢(云计算基础服务)MongoDB服务重磅来袭
    pdfjs viewer 开发小结
  • 原文地址:https://www.cnblogs.com/sode/p/2254085.html
Copyright © 2020-2023  润新知