开发文档 ·

给WordPress登录输入框添加JQ控制,判断输入是否符合要求

思路

用户在登录时,要按照用户名规则输入,否则不能提交,因为即便提交到后台也不能登录成功,增加了服务器负担,直接在登录页面无刷新判断多好。

[ssredlist]

  • 用户名规则:登录用户名应该是字母开头,可以带数字等的一串字符串,所以正则判断可以使用这个规则,regUsername = /^[a-zA-Z_][a-zA-Z0-9_]{3,19}$/;
  • 邮箱判断:邮箱的格式应该是XXX@web.com/cn等,比如648861400@qq.com,所以用正则判断用户输入的是不是邮箱,可以使用这个规则,regemailNum = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
  • 用户输入就触发这个判断,那就是input值的改变,就触发jq的判断

[/ssredlist]

/*提交登录*/
$(document).ready(function () {
	var regUsername = /^[a-zA-Z_][a-zA-Z0-9_]{3,19}$/;
	var regemailNum = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
	var regPasswordSpecial = /[~!@#%&=;':",./<>_\}\]\-\$\(\)\*\+\.\[\?\\\^\{\|]/;
	var regPasswordAlpha = /[a-zA-Z]/;
	var regPasswordNum = /[0-9]/;
	var check = [false, false];
	//校验成功函数
	function success(Obj, counter) {
		Obj.removeClass('has-error').addClass('has-success');
		$('#aliuyun_login_noti').html('').hide();
		$('.glyphicon-ok').eq(counter).show();
		$('.glyphicon-remove').eq(counter).hide();
		check[counter] = true;

	}

	// 校验失败函数
	function fail(Obj, counter, msg) {
		Obj.removeClass('has-success').addClass('has-error');
		$('.glyphicon-remove').eq(counter).show();
		$('.glyphicon-ok').eq(counter).hide();
		$('#aliuyun_login_noti').html('
' + msg + '
').show(); check[counter] = false; } //密码匹配 // 匹配字母、数字、特殊字符至少两种的函数 function atLeastTwo(password) { var a = regPasswordSpecial.test(password) ? 1 : 0; var b = regPasswordAlpha.test(password) ? 1 : 0; var c = regPasswordNum.test(password) ? 1 : 0; return a + b + c; } //初始提示内容 $('#aliuyun_login_noti').html('
请先输入用户名或者邮箱,才能进一步操作
').show(); //先判断用户名,当然就先禁用密码及提交按钮。 $('#login-form-submit').css("z-index",-10).attr('disabled', true); $('#password').css("z-index",-10).attr('disabled', true).val(''); $('#user_login').val(''); // 用户密码匹配-登录页面 $('#login-form').find('#password').change(function () { //password = $(this).val(); if ($(this).val().length < 6) { $('#login-form-submit').css("z-index",-10).attr({ 'disabled': true, 'cursor': 'not-allowed', }); fail($(this), 1, '密码太短,不能少于6个字符'); } else { if (atLeastTwo($(this).val()) < 2) { $('#login-form-submit').css("z-index",-10).attr({ 'disabled': true, 'cursor': 'not-allowed', }); fail($(this), 1, '密码中至少包含字母、数字、特殊字符的两种'); } else { $('#login-form-submit').css("z-index",1).attr({ 'disabled': false, 'cursor': '', }); success($(this), 1); } } }); // 邮箱及用户名匹配 $('#login-form').find('#user_login').change(function () { if (regemailNum.test($(this).val()) || regUsername.test($(this).val())) { //输入正确,其他按钮可用,否则不可用 success($(this), 0); $('#login-form-submit').css("z-index",1).attr({ 'disabled': false, 'cursor': '', }); $('#password').css("z-index",1).attr({ 'disabled': false, 'cursor': '', }); } else { fail($(this), 0, '用户名或邮箱输入错误,请重新输入'); $('#login-form-submit').css("z-index",-10).attr({ 'disabled': true, 'cursor': 'not-allowed', }); $('#password').css("z-index",-10).attr({ 'disabled': true, 'cursor': 'not-allowed', }); } }); $("form#login-form").submit(function (e) { //提交之前,当然要做输入判断啦,如果输入不正确,那么还提交了干嘛呢 $('#aliuyun_login_noti').html('').hide(); console.log('提交了。'); var i = 0; console.log(i); if (!check.every(function (value) { return value == true; })) { for (key in check) { if (!check[key]) { $('#login-form').find('input').eq(key).removeClass('has-success').addClass('has-error'); i++; } } } console.log(i); if (i > 0) { $('#login-form').find("#aliuyun_login_noti").html('
安全验证不通过,请核对账号信息
').fadeIn(); return false; } console.log(i); var _wpnonce = TT._wpnonce; var datas = $(this).serialize(); datas = datas + '&_wpnonce=' + _wpnonce; //writeObj(datas); //console.log(datas); //return !1; var surl = getUrlParam('redirect_to'); //console.log(surl); //return !1; var signIn = TT.apiRoot + "v1/" + TT.sessionApiTail; //console.log(signIn); //发送数据 $.ajax({ url: signIn, type: 'POST', /*提交方式*/ data: datas, cache: false, dataType: 'json', beforeSend: function () { showLoading({ title: "正在……", mask: true, success: function (res) { console.warn(JSON.stringify(res)) } }); setTimeout(function () { hideLoading(); }, 5000); }, success: function (ee) { //console.log(ee); //writeObj(ee); if (ee.success == 1) { //hideLoading(); aliuyun_alert(ee.message, '成功', 'success'); setTimeout(function () { window.location.href = surl; }, 1000); } return false; }, error: function (ee) { console.log(ee.responseJSON); //writeObj(ee); //alert(ee.responseJSON.message); aliuyun_alert(ee.responseJSON.message, '登录失败', 'error'); return false; } }); e.preventDefault(); }); });

什么便是完整代码,效果如下图所示

LEAVE A REPLY