注册表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册页面</title>
<script type="text/javascript">
    //验证表单
    function run() {
        //用户名不能为空
        //获取用户名的值
        //var name=document.getElementById("nameId").value;
        //var name=document.form1.username.value;
        var name = document.getElementById("nameId").value;
        if (name.trim() == "") {
            alert("用户名不能为空");
            return false;
        }
        //密码多于6位
        var pwd = document.form1.password.value;
        if (pwd.trim().length < 6) {
            alert("至少6密码");
            return false;

        }
        //确认密码一致
        var repwd = document.form1.repassword.value;
        if (repwd != pwd) {
            alert("密码不一致");
            return false;
        }
        //邮箱规则
        var email = document.form1.email.value;
        //正则表达式
        if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email)){
            alert("邮箱错误");
            return false;
        
        }
    }
</script>
</head>
<body>
    <form name="form1" action="https://www.baidu.com" οnsubmit="return run()">
        <table border="1" width="40%" cellpadding="10" align="center">
            <th colspan="2">用户注册页面</th>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="username" id="nameId"  /></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="repassword" /></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="eamil" name="email" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"  /></td>
            </tr>

        </table>

    </form>
</body>
</html>

 

转载于:https://www.cnblogs.com/privking/p/9670869.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于BootstrapValidator的Bootstrap注册表模板,包含注册、手动验证、表重置等功能: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap注册表</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h2>注册</h2> <form id="registerForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">用户名</label> <div class="col-md-9"> <input type="text" class="form-control" name="username" placeholder="请输入用户名"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">码</label> <div class="col-md-9"> <input type="password" class="form-control" name="password" placeholder="请输入码"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">确认码</label> <div class="col-md-9"> <input type="password" class="form-control" name="confirmPassword" placeholder="请再次输入码"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">邮箱</label> <div class="col-md-9"> <input type="email" class="form-control" name="email" placeholder="请输入邮箱"> </div> </div> <div class="form-group"> <div class="col-md-9 col-md-offset-3"> <button type="submit" class="btn btn-primary">注册</button> <button type="reset" class="btn btn-default">重置</button> </div> </div> </form> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script> <script> $(document).ready(function() { $('#registerForm').bootstrapValidator({ message: '输入值无效', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '用户名无效', validators: { notEmpty: { message: '用户名不能为空' }, stringLength: { min: 6, max: 30, message: '用户名长度必须在6到30之间' }, regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: '用户名只能包含字母、数字、下划线和点号' } } }, password: { validators: { notEmpty: { message: '不能为空' }, stringLength: { min: 6, max: 30, message: '码长度必须在6到30之间' }, identical: { field: 'confirmPassword', message: '两次输入的码不一致' } } }, confirmPassword: { validators: { notEmpty: { message: '确认不能为空' }, identical: { field: 'password', message: '两次输入的码不一致' } } }, email: { validators: { notEmpty: { message: '邮箱不能为空' }, emailAddress: { message: '请输入有效的邮箱地址' } } } } }); }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值