文本框输入内容及时判断
除了用oninput事件 还可以使用onkeyup事件键盘输入
isNaN() 判断是否为数字
οnkeyup="if (isNaN(value)&&value!='-') execCommand('undo');"
如果是事件 然后撤销的话在事件里面加上 document.execCommand('undo');
οnkeyup="this.value=this.value.replace(/\D/g,'')" 正整数
正整数且保留俩位小数
οninput="value=value.replace(/^\./g, '0.').match(/\d+\.?\d{0,2}/)"
execCommand 相当于API里面封装了一些操作 undo是撤销之前操作
onkeyup = "this.value = this.value.replace(' ', '')" 是不许输入空格 一旦输入立即清掉
页面验证的大致几类
1：非空 2：输入内容限制 3：输入内容比较相同（邮箱）
验证地方：
1：失去焦点的验证 2：输入内容改变验证 3：提交按钮时验证
（2一般验证方法return true或false）到时候3可以调用方法判断出来true或false 也就是一次方法2,3都去调用使用
比如这个验证名字 提交的时候直接调用NameJudge 可以知道是否成功
var testName = NameJudge($("#Name"));
if (!testName) {
return;
}
验证效果：
1：不满足的元素进行红色边框显示 2：如果是提交的话需要定位到不满足元素
运用的知识点大纲
1：事件 onblur onkeyup
2: 红框效果 $(e).css("border-color", "#EE2700");
移除 $(e).removeAttr("style");
3：调到锚点 $('body,html').animate({ scrollTop: $("#ID").offset().top }, 500); //或者是$(this)
效果模板
一:验证名字格式 以及对名字首字符处理
//验证名字 οnblur="NameJudge(this)"
function NameJudge(e) {
var txt = $(e).val().trim();
var bool = NameCheck(txt);//正则验证
if (txt == null || txt === "") {
$(e).css("border-color", "#EE2700");
$(e).prev().css("color", "#EE2700");
$('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);//跳至锚点
return false;
} else if (!bool) {
$(e).css("border-color", "#EE2700");
$(e).prev().css("color", "#EE2700");
$('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);
return false;
}
$(e).prev().removeAttr("style");
$(e).removeAttr("style");
return true;
}
//名字正则验证
function NameCheck(name) {
var s = /^[ A-Za-z]+$/;
return s.test(name);
}
//格式化输入的英文字符串：单词首字母大写 οnkeyup="NameFormatting(this)"
function NameFormatting(obj) {
var returnStr = "";
//if (msg == "ContacUS Name") { //如果可以输/ 或者别的符号的时候 就做个判断 吧正则里面这个符号放开
// $(obj).val($(obj).val().replace(/[^a-zA-Z\s/]/g, ''));
//}
$(obj).val($(obj).val().replace(/[^a-zA-Z\s]/g, ''));
var str = $(obj).val();
if (str != "" && str != undefined) {
returnStr = NameFormatStr(str);
$(obj).val(returnStr);
}
}
function NameFormatStr(str) {
var returnStr = "";
var strArry = str.split('/');
if (strArry.length > 0) {
var tempStr = "";
for (var i = 0; i < strArry.length; i++) {
if (strArry[i] == "") tempStr += "/";
else {
tempStr += NameFormatStrWithSpaceCharacter(strArry[i]) + "/";
}
}
returnStr = tempStr != "" ? tempStr.substring(0, tempStr.length - 1) : tempStr;
}
else {
returnStr = NameFormatStrWithSpaceCharacter(str);
}
return returnStr;
}
// 首字母大写 没有间隔
function WithOutInterval(str) {
return str.substring(0, 1).toUpperCase() + str.slice(1).toLowerCase();
}
// 首字母大写 以空格间隔每个单词
function NameFormatStrWithSpaceCharacter(str) {
return str.toLowerCase().split(' ').map(function (repalceStr)
{ return (repalceStr.substring(0, 1).toUpperCase() + repalceStr.slice(1).toLowerCase()); }
).join(' ');
}
// 首字母大写 以 '/'间隔每个单词
function NameFormatStrWithDiagonal(str) {
return str.toLowerCase().split('/').map(function (repalceStr)
{ return (repalceStr.substring(0, 1).toUpperCase() + repalceStr.slice(1).toLowerCase()); }
).join('/');
}
二：电话号码的验证 限制内容为数字 οnkeyup="Validate_Numbers(this)" 内容判断 οnblur="Judgephone(this)"
//验证纯数字onkeyup事件不是数字消失撤回
function Validate_Numbers(e) {
$(e).val($(e).val().replace(/[^0-9]/g, ''));
}
//内容验证
function Judgephone(obj) {
var result = false;
if ($(obj).val()!= "") {
var s = /^\((\d{3})\)(\d{3})-(\d)+$/;
var ts = s.test($(obj).val());
if (!ts) {
$(obj).css("border-color", "#EE2700");
$(obj).prev().css("color", "#EE2700");
$('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);
//window.location.hash("phone");
} else {
result = true;
}
} else {
$(obj).css("border-color", "#EE2700");
$(obj).prev().css("color", "#EE2700");
$('body,html').animate({ scrollTop: $("#SpecialRequire").offset().top }, 500);
result = false;
}
if (result) {
$(obj).removeAttr("style");
$(obj).prev().removeAttr("style");
}
return result;
}
三：邮箱的验证 内容验证 匹配验证 οnblur="JudgeEmail(this,另一个input的id)"
页面input元素
<li>
<label class="ptf__label">Email:*</label>
<input type="email" id="email" placeholder="Email" οnblur="JudgeEmail(this, 'retypeEmail')" @*class="restrict-width"*@>
</li>
<li>
<label class="ptf__label">Confirm Email:*</label>
<input type="email" id="retypeEmail" placeholder="Email" οnblur="JudgeEmail(this, 'email')">
</li>
function JudgeEmail(e,str) {
$(e).next().html("");
$('#retypeEmail').next().html(""); //retypeEmail 是验证邮箱的input id
var txt = $(e).val().trim();
var email = $("#" + str).val().trim();
var bool = EmailCheck(txt);
var result = true;
if (txt == null || txt === "") {
$(e).css("border-color", "#EE2700");
$(e).prev().css("color", "#EE2700");
$('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);
result = false;
} else if (!bool) {
$(e).css("border-color", "#EE2700");
$(e).prev().css("color", "#EE2700");
$('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);
result = false;
}
if (email !== "") {
if (email !== txt) {
$("#ss").show();
$(e).css("border-color", "#EE2700");
$(e).prev().css("color", "#EE2700");
$('body,html').animate({ scrollTop: $("#ID").offset().top }, 500);
result = false;
}
}
if (result) {
$(e).removeAttr("style");
$(e).prev().removeAttr("style");
$("#" + str).removeAttr("style");
$("#" + str).prev().removeAttr("style");
$("#ss").hide();
return true;
}
}
//验证邮箱规则
function EmailCheck(email) {
//var s = /^(\w+[_|\_|\.|\-]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.|\-]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
var s = new RegExp(/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/);
return s.test(email.toLowerCase());
}
四：日期比大小规则
流程：获取俩个日期的值 进行new date转化日期模式 通过formatdate方法 转成想要模式
var t_datefrom = $("#datefrom").val();
var t_dateto = $("#dateto").val();
var date1 = new Date(t_datefrom);
var date2 = new Date(t_dateto);
var t_date1 = formatDate(date1);
var t_date2 = formatDate(date2);
var formatDate = function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
};
五：下拉框验证数据 绑定数据
验证数据就是 onchange 的时候如果为空 就加上红框效果 调至锚点
绑定数据 俩种情况 一种是自动绑定 也就是上一级变动之后绑定 一种是手动绑定
但是方法用一个就行传参数为上级id 手动的就传$(this).val()
//城市列表手动选择改变
function ChangeCitys(CountryID ) {
$.ajax({
type: 'POST',
dataType:'JSON',
url: "/Home/GetAACity",
data: { "CountryID": CountryID, "languagesId": 1 },
success: function (data) {
if (data.Mes != "nodata") {
//绑定数据 放入下拉框
EvalAACity(data.Lists, e);
}
else {
$(e).parent().parent().next().children().eq(1).html("<li><span>Nothing selected</span></li>");
}
},
});
}
//绑定城市列表下拉框
function EvalAACity(data, e) {
var list = eval(data);//eval其实用不用都行 直接遍历date也可以
var htmlStr = "";
for (var item in list) {
htmlStr += "<li><label class='tick-check-label'><div class='tick-check'><input type='checkbox' id=" + list[item].CityId + "><span class='marker'></span></div><p> " + list[item].UsCity.city_L_BasicInfo.CityName + "</p></label></li>";
//htmlStr += "<li><input type='checkbox' class='ccc' value=" ">" + list[item].city_L_BasicInfo.CityName + "</li>";
}
$(e).parent().parent().next().children().eq(1).html(htmlStr);
}
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
