zoukankan      html  css  js  c++  java
  • jQuery Validate (登录页面相关验证)

    $(function() {
    var submit = false;
    var superHtml = [];
    /**
    * 匹配企业帐号,以字母开头,长度在6-20之间,只能包含字符、数字和下划线。
    */
    // jQuery.validator.addMethod("userNameIsFormart", function(value, element) {
    // return this.optional(element) || /^[a-zA-Z]w{5,19}$/.test(value);
    // }, "企业名称格式:以字母开头,长度在6-20字符之间,只能包含字符、数字和下划线。");
    /**
    * 验证企业名称是否存在;
    */
    // jQuery.validator.addMethod("userNameIsExist", function(value, element) {
    // return action.checkUserName();
    // }, "该企业名称不存在。");

    /**
    * 匹配密码,长度在6-20之间。
    */
    // jQuery.validator.addMethod("pwdIsFormart", function(value, element) {
    // return this.optional(element) || /^.{6,20}$/.test(value);
    // }, "企业密码格式:长度在6-20字符之间");

    /**
    * 验证的调用方法 if(!validator.valid()){ return false; } 验证重新启动 validator.reset();
    */
    var validator = {
    validator : null,
    valid : function($this) {
    // 如果验证通过,设置提示信息消失
    if(this.validator.element($this)){
    $this.parentNode.children[1].remove();
    }
    return this.validator.element($this);
    },
    validForm : function() {
    return this.validator.form();
    },
    reset : function() {
    this.validator.resetForm();
    },
    init : function() {
    this.validator = $('#frm_login').validate({
    // ignore: [],//设置验证隐藏表单域
    rules : {
    'userName' : {
    required : true,
    // userNameIsFormart : true,
    // userNameIsExist : true
    },
    'password' : {
    required : true,
    // pwdIsFormart : true
    },
    },
    /* 设置错误信息 */
    messages : {
    'userName' : {
    required : "请输入企业名称。",
    userNameIsFormart : "用户名或者密码错误。"
    // userNameIsExist : "该企业名称不存在。"
    },
    'password' : {
    required : "请输入企业密码。",
    pwdIsFormart : "用户名或者密码错误。"
    }
    },
    onkeyup : false, // disable key up
    onfocusout : false, // disable focus out
    // showErrors : function(errorMap, errorList) {
    // if (errorList.length) {
    // alert(errorList[0].message);
    // }
    // }
    errorPlacement : function(error, element){
    if(($(element).val() == "") || ( element.closest('div').find('span').length > 0 ) ){
    element.closest('div').find('span').remove();
    }
    element.closest('div').append('<span style="color: red">' + error.text() + '</span>');
    }

    });
    }

    };
    validator.init();
    var action = {
    /**
    * 验证该用户名是否已被使用
    */
    checkUserName : function() {
    var url = contentPath + "/sysUser/testSysUserExist";
    var param = {};
    param.userName = $('#userName').val();
    param.type = $('#type').val();
    var valState = true;
    $.ajax({
    url : url,// 查询方法的url
    data : param, // params
    type : "post",
    dataType : "json",
    async : false,
    success : function(data) {
    if (data.data.exist) {
    valState = true;
    } else {
    valState = false;
    }
    }
    });
    return valState;
    }
    };

    var bind = {
    bind_event : function() {
    //
    $('#btn_do_login').on('click', function(e) {
    e.preventDefault();
    if (!validator.validForm()) {
    return false;
    }
    if (submit) {
    return;
    }
    submit = true;
    $(this).attr('disabled', true);
    //
    var url = contentPath + "/doLogin";
    var param = {};
    param.username = $("#userName").val(); // 企业账号
    param.password = $("#password").val(); // 企业密码
    param.type = $("#type").val(); // 用户类型
    $.ajax({
    url : url,
    data : param,
    type : 'POST',
    dataType : 'json',
    success : function(data) {
    submit = false;
    $('#btn_do_login').attr('disabled', false);
    if (data.status === "success") {
    window.location.href = contentPath + "/";
    } else {
    // alert(data.msg);
    $('#password').closest('div').append('<span style="color: red">' + data.msg + '</span>');

    }
    },
    error : function() {
    window.location.href = contentPath + "/error";
    }
    });
    });

    /**
    * 企业名称获得焦点,将提示消息清空
    */
    $('#userName').on('focus', function() {
    $('#userName').closest('div').find('span').remove();
    });

    /**
    * 企业密码获得焦点,将提示消息清空
    */
    $('#password').on('focus', function() {
    $('#password').closest('div').find('span').remove();
    });

    /**
    * 企业账号失去焦点事件
    */
    // $('#userName').on('blur', function() {
    // validator.valid(this);
    // });

    /**
    * 企业密码失去焦点事件
    */
    // $('#password').on('blur', function() {
    // validator.valid(this);
    // });

    }

    };
    bind.bind_event();
    });

  • 相关阅读:
    开启 clr enabled
    索引查看
    nginx 安装
    mysql中int(10)与int(11)有什么区别吗?
    1.安卓开发基础1~6笔记
    Vue项目搭建基础之Vue-cli模版测试
    alert执行顺序
    介绍call和apply
    a链接易混淆与form表单简易验证用法详解
    js正则知识点
  • 原文地址:https://www.cnblogs.com/luyang1990/p/4540411.html
Copyright © 2011-2022 走看看