在需要验证的input标签上添加失去焦点事件,如下
<input type="password" id="LoginWord1" onblur="myFunction()" />
用正则表达式验证输入的字符,若不匹配则清空,并提示
function myFunction() {
var LoginWord1 = $("#LoginWord1").val();
var str = /^[A-Za-z0-9]{5,12}$/;
if (!str.test(LoginWord1)) {
$("#LoginWord1").val("");
$("#LoginWord1").attr("placeholder", "请输入5~12位的字母或数字");
}
}
还有一种提示效果,需要引用插件layer
<script src="~/Content/layer/layer.js"></script>
function myFunction() {
var LoginWord1 = $("#LoginWord1").val();
var str = /^[A-Za-z0-9]{5,12}$/;
if (!str.test(LoginWord1)) {
$("#LoginWord1").val("");
//$("#LoginWord1").attr("placeholder", "请输入5~12位的字母或数字");
layer.tips('请输入5~12位的字母或数字', '#LoginWord1', {
tips: [3, '#0FA6D8'], time: 3000
});
}
}
layer.tips的运用具体可参考layer官方文档
效果图: