<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="css/userReg.css" rel="stylesheet">
<link href="">
<style>
</style>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="top-banner"><img src="img/regbanner.jpg" style="text-align: center"></div>
<div class="title-line"><span class="tit">注册</span></div>
<form action="" method="post">
<label>昵 称：</label><input type="text" name="userName" id="userName" value="" placeholder="请输入你的昵称" /><span class="spa spa1" ></span><br />
<label>密 码：</label><input type="text" name="password" id="password" value="" placeholder="请输入密码"/><span class="spa spa4"></span><br />
<label>确认密码：</label><input type="text" name="password" id="password1" value="" placeholder="请确认密码"/><span id="tishi"></span>
<label> </label>
<div>
<input type="submit" value="注册" id="sub" />
<input type="submit" value="返回" id="back" />
</div>
</form>
<div class="title-line"></div>
</div>
<div class="tfoot" style="max-width:100%;">
<div class="tips">Pet store</div>
<div class="cards">
<a target="_blank" href="#">帮助中心</a>
</div>
<div class="cards">
<a target="_blank" href="#">友情链接</a>
</div>
<div class="cards">
<a target="_blank" href="#">联系我们</a>
</div>
<div class="cards">
<a target="_blank" href="#">加入我们</a>
</div>
<div class="tips">传送门</div>
<div class="cards">
<a target="_blank" href="#">首页</a>
</div>
<div class="cards">
<a target="_blank" href="#">宠物分类</a>
</div>
<div class="cards">
<a target="_blank" href="#">宠物用品</a>
</div>
<div class="cards">
<a target="_blank" href="#">画廊</a>
</div>
<div class="tips">合作伙伴</div>
</div>
<script src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
window.onload=function(){
$("#userName").focus()
}
/************************ 失焦判断 **********************************/
$("input").blur(function(){
$(".spa1").css("color","#BD362F")
$(".spa4").css("color","#BD362F")
if($(this).is("#userName")){ //姓名判断
var na=/^[\u4E00-\u9FA5]{2,4}$/
if($("#userName").val()!=""){
if(!(na.test($("#userName").val()))){
$(".spa1").text("请输入2-4个汉字");
$(this).css("border","1px solid #BD362F")
return false;
}else if(na){
$(".spa1").text("");
return true;
}
}else{
$(".spa1").text("");
}
}
if($(this).is("#userName")){ //姓名判断是否为空
var na=/^[\u4E00-\u9FA5]{2,4}$/
if($("#userName").val()==""){
if(!(na.test($("#userName").val()))){
$(".spa1").text("用户名不能为空");
$(this).css("border","1px solid #BD362F")
return false;
}else if(na){
$(".spa1").text("");
return true;
}
}else{
$(".spa1").text("");
}
}
if($(this).is("#password")){ //密码判断
var wp=/^[a-zA-Z]\w{5,17}$/
if($("#password").val()!=""){
if(!(wp.test($("#password").val()))){
$(".spa4").text("请输入以字母开头,6~18位字符");
$(this).css("border","1px solid #BD362F")
return false;
}else if(wp){
$(".spa4").text("");
return true;
}
}else{
$(".spa4").text("");
}
}
if($(this).is("#password")){ //密码是否判断
var wp=/^[a-zA-Z]\w{5,17}$/
if($("#password").val()==""){
if(!(wp.test($("#password").val()))){
$(".spa4").text("密码不能为空！");
$(this).css("border","1px solid #BD362F")
return false;
}else if(wp){
$(".spa4").text("");
return true;
}
}else{
$(".spa4").text("");
}
}
})
/********************** 聚焦提示 ************************/
$("input").focus(function(){
if($(this).is("#userName")){
$(".spa1").text("2-4个汉字").css("color","#aaa")
$(this).css("border","1px solid #aaa")
}
if($(this).is("#password")){
$(".spa4").text("以字母开头,6~18位字符").css("color","#aaa")
$(this).css("border","1px solid #aaa")
}
})
/*********************** 提交验证 ***************************/
$("#sub").click(function(){
var na=/^[\u4E00-\u9FA5]{2,4}$/; //用户名正则
var wp=/^[a-zA-Z]\w{5,17}$/; //密码正则
if(na.test($("#userName").val())
&&wp.test($("#password").val())){
return true;
}else{
if($("#userName").val()==""){
$(".spa1").text('请输入用户名')
}
if($("#password").val()==""){
$(".spa4").text('请输入密码')
}
}
})
</script>
<script>
function validate() {
var password = document.getElementById("password").value;
var password1 = document.getElementById("password1").value;
<!-- 对比两次输入的密码 -->
if(password == password1)
{
document.getElementById("tishi").innerHTML="<font color='green'>两次密码相同</font>";
document.getElementById("button").disabled = false;
}
else {
document.getElementById("tishi").innerHTML="<font color='red'>两次密码不相同</font>";
document.getElementById("button").disabled = true;
}
}
</script>
</div>
</div>
</body>
</html>
