注册

1.注册html

<#include '/common/header.html' />

<link rel="stylesheet" type="text/css" href="${ctx}${themes_path}/member/register/css/register.css" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}


#left {
width: 50%;
float: left;
}


#right {
width: 50%;
float: right;
}


</style>
<div class="index_logo">
<a href="${ctx}/index.html"><@image src="${logo}" class="pngFix" style="width:175px;height:60px;" /></a>
<h1 class="user_title">欢迎注册</h1>
</div>
    
<div class="content">
        <form id="user-info-form" action="${ctx}/api/shop/member/reg-mobile.do" method="post" class="validate">
           <div class="form-list">
                <div class="form-group">
                <div id="left">
                <h1 class="form-item">基本信息填写（必填）</h1>
                    
                    <div class="form-item">
                        <span class="form-label tsl" data-phase-id="r_p_mobileNum">用户名</span>
                        <div class="mobile-text">
                            <input id="username-text" class="form-control mobile-input" name="username" maxlength="20" placeholder="请输入您的账户名和登录名" type="text" isrequired="true">
<!-- <p style="color: red; font-size: 12px;">长度只能在4-20个字符之间</p> -->
</div>
                    </div>
                   
                    <div class="form-item" style="margin-top:10px;">
                        <span class="form-label tsl">设置密码  </span>
                        <div class="mobile-text">
                            <input id="password-ps" class="form-control mobile-input" name="password" maxlength="20" placeholder="请输入您的登录密码"  type="password" isrequired="true">
</div>
                    </div>
                    <div class="form-item" style="margin-top:10px;">
<span class="form-label tsl" >确认密码 </span>
                        <div class="mobile-text">
                            <input id="repassword-ps" class="form-control mobile-input" name="repassword" maxlength="20" placeholder="请再次输入您的登录密码"  type="password" isrequired="true">
</div>
                    </div>
                   
                    
                    <div class="form-item">
                        <span class="form-label tsl" data-phase-id="r_p_mobileNum">中国0086</span>
                        <div class="mobile-text">                            
                            <input type="text" class="mobile-input form-control" name="mobile" id="mobile-num-txt" maxlength="11" placeholder="请输入您的常用手机">
</div>
                    </div>                                    
                    
                    <div class="form-item">
<span class="form-label tsl" data-phase-id="r_p_noCaptcha">验证码</span>
<div class="mobile-text">
<input type="text" class="mobile-input form-control m_small" name="validcode" id="validcode" maxlength="6"  style="width: 200px; float: left;" />
    <img src="${ctx}/validcode.do?vtype=memberlogin" alt="验证码" class="code_img  send-sms-btn" style="right: 45%;width: 80px;height: 30px;">
</div>
            </div>     
           
            <div class="form-item">
<span class="form-label tsl" data-phase-id="r_p_noCaptcha">手机验证码</span>
<div class="mobile-text">
<input type="text" class="mobile-input form-control" name="validate_sms_code" id="validate-sms-code-txt" maxlength="6" dataType="int" style="width: 200px; float: left;" />
<input type="button" class="btn btn-info send-sms-btn" id="send-sms-button" value="获取验证码"  style="right: 45%;">
</div>
            </div>   
                   
            <div class="form-item form-item-short">
<input id="license" type="checkbox" checked="checked" name="license" value="agree" style="margin-right:10px;"/>阅读并同意<span class="protocol">《找找看用户注册协议》</span><span class="protocol">《隐私政策》</span>
</div>
</div>

<div id="right">
    <h1 class="form-item">公司信息填写（选填）</h1>

                <div class="form-item">
<span class="form-label tsl" data-phase-id="r_p_mobileNum">公司名称
</span>
<div class="mobile-text">
<input type="text" class="mobile-input form-control"
name="name" id="name" maxlength="50"
placeholder="请输入您的公司名称">
</div>
</div>
<div class="form-item">
<span class="form-label tsl" data-phase-id="r_p_mobileNum">公司地址</span>
<div class="mobile-text">
<input type="text" class="mobile-input form-control"
name="address" id="address" maxlength="50"
placeholder="请输入您的公司地址">
</div>
</div>
<div class="form-item">
<span class="form-label tsl" data-phase-id="r_p_mobileNum">公司电话</span>
<div class="mobile-text">
<input type="text" class="mobile-input form-control"
name="teltphone" id="teltphone" maxlength="20"
placeholder="请输入您的公司电话">
</div>
</div>
<div class="form-item">
<span class="form-label tsl" data-phase-id="r_p_mobileNum">行业类别</span>
<div class="mobile-text">
<input type="text" class="mobile-input form-control"
name="category" id="category" maxlength="20"
placeholder="请输入您的公司行业类别">
</div>
</div>
<div class="form-item">
<span class="form-label tsl" data-phase-id="r_p_mobileNum">从业人数</span>
<div class="mobile-text">
<input type="text" class="mobile-input form-control"
name="number" id="number" maxlength="8"
placeholder="请输入您的公司从业人数">
</div>
</div>
</div>
               
                    
                    <div class="form-item form-item-short">
<input type="hidden"  style="margin-right:10px;"/>
</div>
            <div class=" form-item-short" style="padding: 5px 10px 15px 562.5px;">
                <input style="width:200px;" type="button" id="submit-form-btn" class="btn btn-large tsl btn-disabled" value="提交" />
            </div>

<div id="output"></div>
            </div>
            </div>
        </form>
    </div>


    
<script type="text/javascript">
$(function(){
//换验证码
$(".code_img").click(function(){
$(this).attr("src","${ctx}/validcode.do?vtype=memberlogin&r="+new Date().getTime());
});


$('#validate-sms-code-txt').on('input propertychange', function(){
var _this = $(this), val = _this.val();
if(isNaN(val)){
$(this).val(val.substring(0,this.value.length-1));
}
});


$("#mobile-num-txt").on('input propertychange', function(){
var _this = $(this),
_val  = _this.val();
if(_val.length == 11){
if(!/^0?(13[0-9]|15[0-9]|18[0-9]|14[0-9]|17[0-9])[0-9]{8}$/.test(_val)){
_this.parent().addClass('error has-error');
}else {
_this.parent().removeClass('error has-error');
}
}
})
// 发送验证码
$("#send-sms-button").click(function(){
var _this = $(this);
var mobileNum = $.trim($("#mobile-num-txt").val());
if(!mobileNum){
$.message.error("手机号不能为空");
$("#mobile-num-txt").parent().addClass('error has-error');
return false;
}else if (!/^0?(13[0-9]|15[0-9]|18[0-9]|14[0-9]|17[0-9])[0-9]{8}$/.test(mobileNum)) {
$.message.error("请填写正确的手机号");
$("#mobile-num-txt").parent().addClass('error has-error');
return false;
}else {
$("#mobile-num-txt").parent().removeClass('error has-error');
}


//输入验证码
var validcode =  $.trim($('#validcode').val());
if(!validcode){
$.message.error("验证码不能为空");
$("#validcode").parent().addClass('error has-error');
return false;
}
$.ajax({
url:ctx + "/api/shop/member/validcode_safe.do",
type : "post",
            data:{"validcode":validcode},
success:function(result){
if(result.result == 1) {
$.ajax({
    url: ctx + '/api/shop/sms/sms-safe.do',
            success: function (result) {
                if(result.result == 1){
                    var options = {
                        url : ctx + "/api/shop/sms/send-sms-code.do?mobile=" + mobileNum+"&key="+"register",
                        dataType:"json",
                        success:function(result) {
                            if(result.result == 1) {
                                $.message.success('发送成功，请注意查收！');
                                $.countDown(_this);
                            } else {
                                $.message.error(result.message);
                            }
                        },
                        error : function(){
                            $.message.error('出现错误，请重试！');
                        }
                    }
                    $.ajax(options);
                }else {
                    $.message.error(result.message);
                }
            },
            error: function () {
                $.message.error('出现错误，请重试！');
            }
        })
                } else {
                    $.message.error(result.message);
                }
}
})






});

//点击弹出对话框
$(".protocol").on('click', function(){
$.ajax({
url:"protocol.html",
dataType:"html",
async:false,
cache:false,
success:function(html){
var options = {
title    : '用户注册协议',
html     : html,
top      : 100,
btn      : false,
backdrop : false,
width    : '800',
// height   : '500',
showCall : function(){
$(".protocol-btn").on('click', function(){
//如果同意没有被勾选，点击同意以后，自动勾选
//if(!$("#license").is(':checked')){
//$("#license").attr("checked","checked");
//}
$('#dialogModal').modal('hide');  //关闭弹出层
})
},
}
$.dialogModal(options);

},
error:function(){
$.message.error("糟糕，出错了:(");
}
});
//调用弹出对话框相关参数
})

//注册 /** mod by ChenZhikang start **/
$("#submit-form-btn").on("click",function(){
var userName = $.trim($("#username-text").val());
        
var checkname=/^[\u4E00-\u9FA5\uf900-\ufa2d\w\-]{4,20}$/;
if(userName.length < 4 ){
$.message.error('用户名长度不能小于4');
return false;
}else if(!checkname.test(userName)){
$.message.error("输入的用户名不符合规范");
return false;
}

var password = $("#password-ps").val(),
repassword = $("#repassword-ps").val();


if(!password){
$.message.error('密码不能为空');
return false;
}else if(password.length < 6 ){
$.message.error('密码长度不能小于6');
return false;
}else if(password.length > 20) {
$.message.error('密码长度不能大于20');
return false;
}
if(password != repassword) {
$.message.error("两次密码输入不一致");
return false;
}

if(!$("#user-info-form").checkall()){
return false;
}

//判断是否同意《服务协议》是否被选中
if(!$("#license").is(':checked')){
$.message.error("请阅读服务协议，并勾选同意服务协议");
return false;
}

if (!$("#mobile-register-form").checkall()) {
return false;
}

// 此处等待非空校验
var mobileNum = $.trim($("#mobile-num-txt").val());
var $this = $(this);
var smsCode = $.trim($("#validate-sms-code-txt").val());
var validcode =  $.trim($('#validcode').val());
var data = {"mobile" : mobileNum, "smsCode" : smsCode,"validcode" : validcode};

$.ajax({
url : ctx + "/api/shop/member/vali-register-sms-code.do",
type : "post",
dataType:"json",
data : data,
success:function(data) {
if(data.result == 1){
$("#user-info-form").ajaxSubmit({
            success: function(data) {
if(data.result == 1) {
location.href = '${ctx}/member/register/register_succ.html';
}else {
$.message.error(data.message);
};
            },
            error : function(a,b,c) {
$.message.error("出现错误，请重试");
console.log('ajax error', a, b, c);
}


        });
}else {
$.message.error(data.message);
};
},
error : function(){
$.message.error("出现错误，请重试");
console.error('ajax error', a, b, c);
}
}); 
});

});
</script>

<#include '/common/footer.html' />

2.注册正则

Module.prototype.regExp = {
// 用户名
// username: /^[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*$/,
//正则h5注册验证
username: /^[\u4E00-\u9FA5\uf900-\ufa2d\w\-]{4,20}$/,
    //  手机号
    mobile  : /^0?(13[0-9]|15[0-9]|18[0-9]|14[0-9]|17[0-9])[0-9]{8}$/,
    //  电子邮箱
    email   : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
    //  密码【6-20位】
    password: /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~\,]{6,20}$/,
    //  正整数【不包含0】
    integer : /^[0-9]+$/,
    //  price
    price   : /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
    //  zip
    zip     : /^[1-9][0-9]{5}$/
}