demo08

demo08注册表单提交

需求

1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮;
2.点击表单里的输入框,隐藏提示文字;
3.点击提交和重置按钮时,都需要有相应的提示;
4.在表单提交是,需要进行验证验证填写内容是否合理:昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。

思路

点击表单里的输入框,隐藏提示文字 placeholder
点击提交和重置按钮时,都需要有相应的提示 调用oninput中判断格式是否正确,如果不正确弹出提示并返回输入框
验证验证填写内容是否合理 正则表达式

代码

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo08</title>
    <meta name="description" content="内容描述" />
    <meta name="keywords" content="关键字" />
    <meta name="robots"content="none"> 
    <meta name="author"content="jinhao"> 
    <meta name="generator"content="vsCode"/> 
    <link rel="stylesheet" href="">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon " href="favicon.ico" type="image/x-icon">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 1200px;
            height: 900px;
            margin: 50px auto;
            border: 1px solid #999999;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        h3{
            writing-mode: vertical-lr;
            margin: 15px;
            color: #000000;
        }
        .message>div{
            padding: 8px;
        }
        .input>input{
            width: auto;
            height: 20px;
            border: 1px solid #e0e0e0;
            padding-left: 5px;
            outline: none;
        }
        .input>div{
            padding: 7px;
        }
        input:focus::-webkit-input-placeholder{
            color: transparent;
        }
        .btn{
            display: flex;
            flex-direction: column;
        }
        .btn :nth-child(1){
            margin: 15px;
            width: 60px;
            height: 60px;
            background-color: #999999;
            border: transparent;
            border-radius: 20px;
            color: #000;
        }
        .btn :nth-child(2){
            margin: 15px;
            width: 60px;
            height: 25px;
            background-color: #999999;
            border: 1px solid #333333;
            border-radius: 20px;
            color: #000000;
        }
    </style>
</head>
<body>
    <form action="" method="post">
        <div class="container">
            <h3>注册表单</h3>
            <div class="message">
                <div class="niker">昵称:</div>
                <div class="name">姓名:</div>
                <div class="qqnumber">qqnumber:</div>
                <div class="phonenumber">手机号:</div>
                <div class="email">邮箱:</div>
                <div class="password">密码:</div>
                <div class="recheck">确认密码:</div>
                <div id="error"></div>
            </div>
            <div class="input">
                <div class="input">
                    <input type="text" id="niker" placeholder="昵称不超过10个字" maxlength="10" oninput="checkniker()">
                </div>
                <div class="input">
                    <input type="text" id="name" placeholder="姓名不超过4个字" maxlength="4" oninput="checkname()">
                </div>
                <div class="input">
                    <input type="text" id="qqnumber" placeholder="qqnumber在6到10位" oninput="checkqqnumber()">
                </div>
                <div class="input">
                    <input type="text" id="number" placeholder="请输入11位手机号" oninput="checknumber()">
                </div>
                <div class="input">
                    <input type="email" id="email" placeholder="请输入邮箱" oninput="checkemail()">
                </div>
                <div class="input">
                    <input type="password" id="password" placeholder="由字母和数字组成且(8,16)" oninput="checkpassword()">
                </div>
                <div class="input">
                    <input type="password" id="recheck" placeholder="请再次确认密码" oninput="checkrecheck()">
                </div>
            </div>
            <div class="btn">
                <input type="submit" value="提交" id="sub">
                <input type="reset" value="重置" id="res">
            </div>
        </div>
    </form>
    <script>
        function checkniker(){
            let niker = $('#niker').val()
        if(niker == '' || niker > 10){
            return
        }
        return
        }
        function checkname(){
            let name = $('#name').val()
        if(name == '' || name >4){
            return
        }
        if(!name.match('^[\u4e00-\u9fa5_a-zA-Z]+$')){
            alert("请输入正确的姓名!")
            $('#name').val('')
        }
        return
        }
       function checkqqnumber(){
        let qqnumber = $('#qqnumber').val()
        if(qqnumber == '' || qqnumber > 10 || qqnumber < 6){
            return
        }
        if(!qqnumber.match('^[0-9]+$')){
            alert("请输入正确的qqnumber!")
            $('#qqnumber').val('')
        }
        return
       }
        function checknumber(){
            let number = $('#number').val()
        if(number == '' || number!=11){
            return
        }
        if(!number.match('^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$')){
            alert("请输入正确的手机号!")
            $('#number').val('')
        }
        return
        }
        function checkemail(){
            let email = $('#email').val()
        if(email == '' || email!=11){
            return
        }
        if(!email.match('^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$')){
            alert("请输入正确的邮箱!")
            $('#email').val('')
        }
        return
        }
        function checkpassword(){
            let password = $('#password').val()
        if(password == ''){
            return
        }
        return
        }
        function recheck(){
            let password = $('#password').val()
            let recheck = $('#recheck').val()
        if(recheck != password){
            alert('密码不一致!')
        }
        return
        }
        $('#sub').click(function(){
            alert('提交成功!')
        })
    </script>
</body>
</html>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值