• js 表单验证


    $(document).ready(function(){
    var ok1 = false;
    var ok2 = false;
    var ok3 = false;
    var ok4 = false;
    $('#title').focus(function(){
    $(this).next().text('请输入姓名').removeClass('state1').addClass('state2');
    }).blur(function(){
    if($(this).val()!=''){
    $(this).next().text("输入成功").removeClass('state1').addClass('state3');
    ok1=true;
    }else{
    $(this).next().text('姓名不能为空').removeClass('state1').addClass('state3');
    }
    });

    $('#phone').focus(function(){
    $(this).next().text('请输入联系电话').removeClass('state1').addClass('state2');
    }).blur(function(){
    if($(this).val()!='' && $(this).val().length==11){
    $(this).next().text("输入成功").removeClass('state1').addClass('state3');
    ok2=true;
    }else{
    $(this).next().text('输入错误').removeClass('state1').addClass('state3');
    }
    });
    $("#car_models").focus(function(){

    $(this).next().text('请选择车型').removeClass('state1').addClass('state2');
    }).blur(function(){
    if($(this).val()!='未选择车型(易车)'){
    $(this).next().text("输入成功").removeClass('state1').addClass('state3');
    ok3=true;
    }else{
    $(this).next().text('未选中车型').removeClass('state1').addClass('state3');
    }
    });
    $("#dealer").focus(function(){
    $(this).next().text('请选择经销商').removeClass('state1').addClass('state2');
    }).blur(function(){
    if($(this).val()!='未选择经销商'){
    $(this).next().text("输入成功").removeClass('state1').addClass('state3');
    ok4=true;
    }else{
    $(this).next().text('未选择经销商').removeClass('state1').addClass('state3');
    }
    });




    $("form").submit(function(e){
    if(ok1 && ok2 && ok3 && ok4){
    return true;

    }
    return false;




    });
    });

    <style>
    .state1{
    color:#aaa;
    }
    .state2{
    color:#000;
    }
    .state3{
    color:red;
    }
    .state4{
    color:green;
    }
    </style>
  • 相关阅读:
    工厂模式之数据工厂
    面向过程的命令模式
    DLL共享主窗口的ADOCONNECTION
    插件框架
    人生哲理
    字符串函数大全
    汉化DBNavigator
    类继承复用之适配器模式
    Bootstraptagsinput标系统使用心得
    bootstrapdatepicker使用
  • 原文地址:https://www.cnblogs.com/wxc1/p/8483332.html
Copyright © 2020-2023  润新知