表单验证实战-优快云博客

本文链接：https://blog.youkuaiyun.com/tuimosz/article/details/78049688

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
color: red;
}
</style>
<script src="jquary/jquery-1.12.0.min.js"></script>
<script>
$(function () {
$("#name").blur(function () {
var le=$(this).val().length;
console.log(le)
if(le<3){
$("#sname").text("用户名格式不正确");
}else {
$("#sname").text("✔");
}
})
$("#emil").blur(function () {
var le=$(this).val();

if(le.indexOf("@")>=0){
$("#semil").text("✔");
}else {

$("#semil").text("用户名格式不正确");
}
})
$("#num").blur(function () {
var le=$(this).val().length;

if(le!=11){
$("#snum").text("用户名格式不正确");
}else {
$("#snum").text("✔");
}
})
$("#card").blur(function () {
var le=$(this).val().length;

if(le!=18){
$("#scard").text("用户名格式不正确");
}else {
$("#scard").text("✔");
}
})
})
</script>
</head>
<body>
姓名:<input type="text" id="name"><span id="sname"></span><br>
Email地址:<input type="text" id="emil"><span id="semil"></span><br>
手机号:<input type="text" id="num"><span id="snum"></span><br>
身份证号码:<input type="text" id="card"><span id="scard"></span><br>
</body>
</html>