大家好，又见面了，我是你们的朋友全栈君。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
.item-label{
height: 30px;
line-height:30px ;
float: left;
}
input {
height: 30px;
line-height: 30px;
background-color: transparent;
text-align: right;
width: 170px;
padding: 0;
font-size: 14px;
}
input::-webkit-input-placeholder {
color: #999;
;
}
input::-moz-input-placeholder {
color: #999;
;
}
input::-ms-input-placeholder {
color: #999;
;
}
input::-o-input-placeholder {
color: #999;
;
}
</style>
</head>
<body>
<label class="item-label">
姓名：</label>
<div class="item-cont item-text">
<input name="name" id="name" type="text" placeholder="请输入您的姓名">
</div>
<label class="item-label">
手机：</label>
<div class="item-cont item-text">
<input name="mobile" id="mobile" type="tel" placeholder="请输入您的电话" maxlength="11" >
</div>
<button class="btn">提交</button>
</body>
</html>
<script>
//解决IE10以下的placeholder问题
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
if (!placeholderSupport()) { // 判断浏览器是否支持 placeholder
$("[placeholder]").each(function () {
var _this = $(this);
var left = _this.css("padding-left");
_this.parent().append('<span class="placeholder" data-type="placeholder" style="position:absolute;height: 30px;text-align: right;width:170px;line-height: 30px;left: ' + left + '">' + _this.attr("placeholder") + '</span>');
if (_this.val() != "") {
_this.parent().find("span.placeholder").hide();
}
else {
_this.parent().find("span.placeholder").show();
}
}).on("focus", function () {
$(this).parent().find("span.placeholder").hide();
}).on("blur", function () {
var _this = $(this);
if (_this.val() != "") {
_this.parent().find("span.placeholder").hide();
}
else {
_this.parent().find("span.placeholder").show();
}
});
// 点击表示placeholder的标签相当于触发input
$("span.placeholder").on("click", function () {
// console.log("11")
$(this).hide();
$(this).siblings("[placeholder]").trigger("click");
$(this).siblings("[placeholder]").trigger("focus");
});
}
// 提交
$('body') .on('click', '.btn', function () {
var name1 = /^[\u4e00-\u9fa5\u4dae\uE863\-a-zA-Z]{1,50}$/; //中英文1到50字内，不带数字
var name2 = /^(\w)\1{1,}$/; //单个字母，重复字母
var name3 = ['傻逼', '煞笔', '神经', '艳遇'];
var name4 = /^[a-zA-Z-\s]+$/;//单个字母
var mobilereg1 = /^1[3|5|6|7|8|9][0-9]{9}$/; // 1[356789][0-9] （后面再接8位数）
var mobilereg2 = /^14[5|7][0-9]{8}$/; // 14[57] （后面再接8位数）
var userName = $.trim($('#name').val());
var mobile = $.trim($('#mobile').val());
if (!userName) {
alert('请填写姓名');
return;
} else if (!name1.test(userName)) {
alert("您输入的姓名格式不正确，请重新输入");
return;
} else if (name2.test(userName.toLocaleLowerCase())) {// 大写字母转小写
alert("您输入的姓名格式不正确，请重新输入");
return;
} else if (name3.indexOf(userName) > -1) {
alert("您输入的姓名格式不正确，请重新输入");
return;
} else if (userName.length <= 1 && name4.test(userName)) {
alert("您输入的姓名格式不正确，请重新输入");
return;
}
if (!mobile) {
alert('请填写手机号码');
return;
} else if (!mobilereg1.test(mobile) && !mobilereg2.test(mobile)) {
alert('请填写正确的手机号码');
return;
}
});
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/132218.html原文链接：https://javaforall.net
