<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery用户注册表单验证代码 - 网页模板</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='js/jquery-1.4.4.min.js'></script>
<script language='javascript' src="js/zzsc.js"></script>
</head>
<body>
<div class='body_main'>
<!-- start main content -->
<div class='index_box' style='margin-top:20px;'>
<div style="position:fixed;color:red;margin:70px 0 0 450px;font-size:16px;Z-index:100;display:block;" id="hint"></div>
<div class='box_title'>
<div class='text_content'>
<h1>欢迎加入网页模板(<a href="http://www.moobnn.com/" target="_blank">www.moobnn.com</a>)</h1>
</div>
</div>
<div class='box_main'>
<div id="register" class="register">
<form id="form" action="http://www.moobnn.com/" method="post" onSubmit="return check();">
<div id="form_submit" class="form_submit">
<div class="fieldset">
<div class="field-group">
<label class="required title">手机号码</label>
<span class="control-group" id="mobile_input">
<div class="input_add_long_background">
<input class="register_input" type="text" id="mobile" name="mobile" maxLength="11" value="" onblur="__changeUserName('mobile');">
</div>
</span>
<label class="tips">仅用于发送服务开通与到期提醒以及紧急故障方便联系到您，绝对保密</label>
</div>
<div class="field-group">
<label class="required title">邮箱</label>
<span class="control-group" id="email_input">
<div class="input_add_long_background">
<input class="register_input" type="text" id="email" name="email" maxLength="50" value="" onblur="__changeUserName('email');">
</div>
</span>
<label class="tips">请输入您常用的邮箱</label>
</div>
<div class="field-group">
<label class="required title">登录账号</label>
<span class="control-group" style="line-height:28px;">
<input id="way_mobile" type="radio" value="mobile" name="username" checked onclick="__changeUserName('mobile');">
手机号码
<input id="way_email" type="radio" value="email" name="username" onclick="__changeUserName('email');">
邮箱 </span>
<label class="tips" style="margin-bottom:5px;" id="tooltext1">请选择以哪个作为您的登录账号</label>
</div>
<div class="field-group">
<label class="required title">设置密码</label>
<span class="control-group" id="password1_input">
<div class="input_add_long_background">
<input class="register_input" type="password" id="password1" name="password1" maxLength="20" value="" onblur="checkPwd1(this.value);" />
</div>
</span>
<label class="tips">请使用6~20个英文字母（区分大小写）、符号或数字</label>
</div>
<div class="field-group">
<label class="required title">短信验证码</label>
<span class="control-group" id="code_input">
<div class="input_add_background" style="margin-right:15px;">
<input class="register_input_ot" type="text" id="code" name="code" max_length="6" value="" onblur="checkAuthCode(this.value);">
</div>
</span>
<label class="tips">若尝试多次仍无法接收到短信验证码，请您联系在线客服帮您开通账号</label>
</div>
</div>
</div>
<div id="div_submit" class="div_submit">
<div class='div_submit_button'>
<input id="submit" type="submit" value="注册" class='button_button disabled'>
</div>
</div>
</form>
</div>
<script type="text/javascript">
function __changeUserName(of){
var username=$('#'+of).val();
if(of=='email'){
if (username.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
showTooltips('email_input','请输入正确的Email地址');
return;
}
}
else{
if(username=='' || !isMobilePhone(username)) {
showTooltips('mobile_input','请输入正确的手机号码');
return;
}
}
}
function checkPwd1(pwd1) {
if (pwd1.search(/^.{6,20}$/) == -1) {
showTooltips('password1_input','密码为空或位数太少');
}else {
hideTooltips('password1_input');
}
}
function checkEmail(email) {
if (email.search(/^.+@.+$/) == -1) {
showTooltips('email_input','邮箱格式不正确');
}else {
hideTooltips('email_input');
}
}
function checkAuthCode(authcode) {
if (authcode == '' || authcode.length != 6) {
showTooltips('code_input','验证码不正确');
}else {
hideTooltips('code_input');
}
}
function check() {
hideAllTooltips();
var ckh_result = true;
if ($('#email').val() == '') {
showTooltips('email_input','邮箱不能为空');
ckh_result = false;
}
if ($('#password1').val() == '') {
showTooltips('password1_input','密码不能为空');
ckh_result = false;
}
if($('#mobile').val()=='' || !isMobilePhone($('#mobile').val())) {
showTooltips('mobile_input','手机号码不正确');
ckh_result = false;
}
if ($('#code').val() == '' || $('#code').val().length !=6) {
showTooltips('code_input','验证码不正确');
ckh_result = false;
}
if ($('#verify').attr('checked') == false){
showTooltips('checkbox_input','对不起，您不同意Webluker的《使用协议》无法注册');
ckh_result = false;
}
return ckh_result;
}
function checkMobilePhone(telphone) {
if(telphone=='' || !isMobilePhone(telphone)) {
showTooltips('mobile_input','请输入正确的手机号码');
}else{
hideTooltips('mobile_input');
}
}
function isMobilePhone(value) {
if(value.search(/^(\+\d{2,3})?\d{11}$/) == -1)
return false;
else
return true;
}
</script>
</div>
<div class='box_bottom'></div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery用户注册表单验证代码.zip
版权申诉
55 浏览量
2022-11-24
12:30:41
上传
评论
收藏 73KB ZIP 举报
jQuery用户注册表单验证代码.zip （14个子文件） 
jQuery用户注册表单验证代码 jiaoben2960 css 
zzsc.css 5KB images 
input_long_light.jpg 4KB
tri.gif 1KB
buttom.png 2KB input_long.jpg 3KB body_bg.png 2KB box_bottom.png 348B input.jpg 2KB box_top.png 2KB
index.html 7KB js jquery-1.4.4.min.js 77KB zzsc.js 4KB index.js 2KB jQuery用户注册表单验证代码.jpg 43KB资源评论
