one_smail 2018-12-18 19:18 采纳率: 66.7%
浏览 1934
已采纳

js表单提交怎么控制填写完整才能提交

我写的这个不管怎么填写,都能直接提交

<form method="post" action="http://www.csdn.net" onSubmit="return checks()">
                    <table border="" cellspacing="" cellpadding="">
                        <tr>
                            <th>账号:</th>
                            <td><input type="text" name="user" id="user" placeholder="您要注册的账号"></td>
                            <td><span class="user-sp"></span></td>
                        </tr>
                        <tr>
                            <th>密码:</th>
                            <td><input type="password" name="password" id="password" placeholder="您的登录密码"></td>
                            <td><span class="pass-sp"></span></td>
                        </tr>
                        <tr>
                            <th>确认密码:</th>
                            <td><input type="password" name="again" id="again" placeholder="再次输入您的密码"></td>
                            <td><span class="again-sp"></span></td>
                        </tr>
                        <tr>
                            <th>邮箱:</th>
                            <td><input type="email" name="name" id="email" placeholder="请输入您的邮箱"></td>
                            <td><span class="email-sp"></span></td>
                        </tr>
                        <tr>
                            <th>验证码:</th>
                            <td><input type="text" name="name" id="code" placeholder="请输入验证码"><a href="javascript:;" id="codea"></a></td>
                            <td><span class="code-sp"></span></td>
                        </tr>
                        <tr>
                            <td>  </td>
                            <td><input type="botton" id="submit" value=""></input></td>
                        </tr>
                    </table>
                </form>

* ```


 js代码部分



$(function (){

codes()
checks()    

function checks(){
// 用户名验证
$('#user').blur(function (){
var user = $('#user').val()

    if(user == ""){
        $('.user-sp').html("*请输入用户名").css('color','red')
        return false
    }
    else if(user.length > 8){
        $('.user-sp').html("*用户名必须小于8个字符").css('color','red')
        return false
    }
    else if( user.length < 4 && user.length > 0 ){
        $('.user-sp').html("*用户名必须大于3个字符").css('color','red')
        return false
    }else{
        // $('.user-lb').hide()
        $('.user-sp').html("✔").css('color','#F00582')
        return true
    }
})

// 密码验证
$('#password').blur(function(){
    var pass = $('#password').val()

    if( pass == "" ){
        $('.pass-sp').html("*请输入密码").css('color','red')
        return false
    }
    else if( pass.length > 11 ){
        $('.pass-sp').html("*密码不能大于10位").css('color','red')
        return false
    }
    else if( pass.length < 5 && pass.length > 0){
        $('.pass-sp').html("*密码不能小于5位").css('color','red')
        return false
    }else{
        $('.pass-sp').html("✔").css('color','#F00582')
        return true
    }       
})

//  重复密码验证
$('#again').blur(function (){
    var again = $('#again').val()
    var pass = $('#password').val()

    if (again == ""){
        $('.again-sp').html('*请确认密码').css('color','red')
        return false
    }
    else if (again !== pass){
        $('.again-sp').html('*密码不匹配').css('color','red')
        return false
    }else{
        $('.again-sp').html('✔').css('color','#F00582')
        return true
    }
})

// 邮箱验证
$('#email').blur(function (){
    var email = $('#email').val()
    var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

    if ( email == "" ){
        $('.email-sp').html('*请输入邮箱').css('color','red')
        return false
    }
    else if( !reg.test(email) ){
    $('.email-sp').html('*邮箱格式不正确').css('color','red')
    return false
    }else{
        $('.email-sp').html('✔').css('color','#F00582')
        return true
    }
})


// 验证的验证
$('#code').blur(function (){
    var code = $('#code').val().toUpperCase()
    var codehtml = $('#codea').html()

    if ( code == "" ){
        $('.code-sp').html('*请输入验证码').css('color','red')
        return false
    }else if (!(code == codehtml)){
        $('.code-sp').html('*验证码有误!').css('color','red');
        return false
        codes();
    }else {
        $('.code-sp').html('✔').css('color','#F00582')
        return true
    }

})

}



// 随机验证码生产
function codes (){
    var item = ""
    var codelength = 4   //定义验证码长度
    var codeval = $('#codea')
    var rod =  new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',  
    'S','T','U','V','W','X','Y','Z');
    for(i = 0; i < codelength; i++){
        var index = Math.floor(Math.random()*36)   //去除0-36的随机数作为索引   foor()向下取整
        item += rod[index]
    }
    console.log(item)
    codeval.html(item)
}


// 单击刷新验证码
$('#codea').click(function(){
    codes()
})

})

  • 写回答

2条回答 默认 最新

  • weixin_43827435 2018-12-19 02:25
    关注

    var ok=false;
    if(user == ""){
    $('.user-sp').html("*请输入用户名").css('color','red')
    ok= false
    }
    else if(user.length > 8){
    $('.user-sp').html("*用户名必须小于8个字符").css('color','red')
    ok= false
    }
    else if( user.length < 4 && user.length > 0 ){
    $('.user-sp').html("*用户名必须大于3个字符").css('color','red')
    ok= false
    }else{
    // $('.user-lb').hide()
    $('.user-sp').html("✔").css('color','#F00582')
    ok= true
    }
    })

    $(function(){
    if(ok=true){
    。。。。
    }else{
    return false;
    }
    })
    这样就可以了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 笔记本上移动热点开关状态查询
  • ¥85 类鸟群Boids——仿真鸟群避障的相关问题
  • ¥15 CFEDEM自带算例错误,如何解决?
  • ¥15 有没有会使用flac3d软件的家人
  • ¥20 360摄像头无法解绑使用,请教解绑当前账号绑定问题,
  • ¥15 docker实践项目
  • ¥15 利用pthon计算薄膜结构的光导纳
  • ¥15 海康hlss视频流怎么播放
  • ¥15 Paddleocr:out of memory error on GPU
  • ¥30 51单片机C语言数码管驱动单片机为AT89C52