<html>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$(".name").blur(function() {
var ming = $(".name").val();
if(ming == undefined || ming == "") {
/*alert("用户名不能为空");*/
/*alert的弹框形式*/
$(".t_name").text("用户名不能为空");
}
})
})
</script>
</head>
<form action="https://www.baidu.com">
姓名:<input type="text" class="name" /><span class="t_name" style="color: red;"></span><br /> 出生日期:
<input type="date" class="date" /><br /> 性别:
<input type="radio" class="sex" name="sex" checked="checked" />男<input type="radio" class="sex" name="sex" />女<br />
<input type="submit" value="注册" />
<input type="reset" value="清除" />
</form>
</body>
</html>
《第二种》
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--注意导包-->
<script src="js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script>
//定义四中变量
var f = false;
var ff = false;
var fff = false;
var ffff = false;
$(function(){
//用户名的验证
$(".uname").blur(function(){
var name = $(".uname").val();
if(name.length!=3){
$(".t_uname").text("必须大于3位");
f = false;
}else{
$(".t_uname").text("√");
f = true;
}
});
//邮箱的验证
$(".uemail").blur(function(){
var email = $(".uemail").val();
if(email.indexOf("@")==-1){
$(".t_uemail").text("必须包含@");
ff = false;
}else{
$(".t_uemail").text("√");
ff = true;
}
});
//手机号的验证
$(".ushou").blur(function(){
var shouji = $(".ushou").val();
if(shouji.length!=11){
$(".t_ushou").text("手机号必须是11位");
fff = false;
}else{
$(".t_ushou").text("√");
fff = true;
}
});
//身份证的验证
$(".ushen").blur(function(){
var shen = $(".ushen").val();
if(shen.length!=18){
$(".t_ushen").text("身份证必须是18位");
ffff = false;
}else{
$(".t_ushen").text("√");
ffff = true;
}
});
})
//跳转页面
function biao(){
if(f==true&&ff==true&&fff==true&&ffff==true){
return true;
}else{
alert("此表单有误!!!!!");
return false;
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" οnsubmit="return biao()">
用户名:<input type="text" class="uname" /><span class="t_uname" style="color: red;"></span><br />
email地址:<input type="text" class="uemail" /><span class="t_uemail" style="color: red;"></span><br />
手机号:<input type="text" class="ushou" /><span class="t_ushou" style="color: red;"></span><br />
身份证号:<input type="text" class="ushen" /><span class="t_ushen" style="color: red;"></span><br />
<input type="submit" value="提交" />
</form>
</body>
</html>