SOURCE

    // form verify
    $(function () {
        $('form').each(function() {
            var _this = $(this);
            _this.find('[type=submit]').attr('type', 'button').attr('submit-btn', '');
        });

        $('form [type="number"]').on('input', function() {
            var _this = $(this);
            var val = _this.val();
            var len = _this.attr('maxlength');
            val.length > len && _this.val(val.slice(0, len));
        });

        var verifyForm = function(val) {
            return {
                required: [/[\S]+/, '输入', '必填项不能为空'],
                phone: [/^1\d{10}$/, '手机号', '请输入正确的手机号'],
                email: [/(\w-*\.*)+@(\w-?)+(\.\w{2,})+/, '邮箱', '邮箱格式不正确'],
                idCard: [/\d{17}[\d|x]|\d{15}/, '身份证号', '请输入正确的身份证号'],
                number: [/^\d+$/, '', '请输入数字'],
                cnName: [/[\u4e00-\u9fa5]+/, '', '请输入中文'],
            }
        };
        var p_n = true;
        function pNull(type) {
            p_n && alert(type + '不能为空');
            p_n = false;
        }
        $('body').on('click', '[submit-btn]', function() {
            var _this = $(this);
            var flag = true;
            p_n = true;
            _this.closest('form').find('[verify]').each(function() {
                var that   = $(this);
                    val    = $.trim(that.val());
                    verify = that.attr('verify');
                    v      = verifyForm(val);
                    type   = that.attr('ctype') || v[verify][1];

                if (val) {
                    if (!v[verify][0].test(val)) {
                        flag = false;
                        alert(v[verify][2]);
                    }
                } else {
                    flag = false;
                    pNull(type);
                }
            });
            flag && _.closest('form').submit();
        });

        $('form').on('keydown', function(e) {
            var _this = $(this);
            if(e && e.keyCode == 13) {
                e.preventDefault();
                _this.find('[submit-btn]').click();
            }
        });
    });

<div class="wrapper">
    <h1 class="h1t">账号注册</h1>
    <form class="form1" autocomplete="off">
        <div class="ipt-w">
            <p>昵称 : </p>
            <input class="ipt" name="user" type="text" verify="required" ctype="昵称" maxlength="32">
        </div>
        <div class="ipt-w">
            <p>邮箱 : </p>
            <input class="ipt" name="email" type="text" verify="email">
        </div>
        <div class="ipt-w">
            <p>手机号 : </p>
            <input class="ipt" name="phone" type="number" verify="phone" maxlength="11">
        </div>
        <div class="ipt-w">
            <p>姓名 : </p>
            <input class="ipt" name="myname" type="text" verify="cnName" ctype="姓名" maxlength="6">
        </div>
        <div class="ipt-w">
            <p>身份证号 : </p>
            <input class="ipt" name="idc" type="number" verify="idCard" maxlength="18">
        </div>
        <div class="sb-btn-w">
            <input class="btn sb-btn" type="submit" value="立即注册">
        </div>
    </form>
</div>

/* reset wap */
body,p,ol,ul,li,dl,dd,h1,h2,h3,h4,h5,h6,input,iframe,nav,header,footer {
    margin: 0;
    padding: 0;
    list-style: none;
}
body {
    font: 18px Microsoft YaHei,Arial,sans-serif;
    -webkit-tap-highlight-color: rgba(50,50,50,.1);
    line-height: 1.5;
    color: #2a2b2c;
    background: #fff;
}
*, *::before, *::after {
    outline: none;
    box-sizing: border-box;
}
a,img {
    text-decoration: none;
    display: block;
    color: #2a2b2c;
    border: 0;
}
input[type="text"],
input[type="submit"],
input[type="button"],
button,
textarea {
    -webkit-appearance: none !important;
}
h1,h2,h3,h4,h5,h6 {
    font: 18px Microsoft YaHei;
}
.wrapper {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}
.h1t {
    font-size: 24px;
    text-align: center;
    margin: 30px 0;
}
.ipt-w {
    margin-bottom: 15px;
}
.ipt-w p {
    margin-bottom: 5px;
    padding: 0 15px;
}
input.ipt {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 15px;
    font: 15px Microsoft YaHei;
    color: #555;
    border: 1px solid #e5e5e5;
    background: #fff;
}
.ipt:focus {
    border: 1px solid #0ce;
}
.sb-btn-w {
    margin: 30px 0;
}
.btn {
    display: block;
    width: 100%;
    height: 45px;
    color: #fff;
    background: #4c5;
    text-align: center;
    font: 16px/45px Microsoft YaHei;
    border-radius: 2px;
    padding: 0 10px;
    border: 0;
    outline: none;
    cursor: pointer;
}
.btn:hover {
    opacity: .9;
}