js表单验证

Posted 2022-02-13 19322li

 

<div class="addDIV">

    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title" style="text-align:center">增加学生</h3>
        </div>
        <div class="panel-body">

            <form method="post" id="addForm" onsubmit="return validateForm();" role="form">
                <table class="addTable">
                    <tr>
                        <td>学号：</td>
                        <td><input type="text" name="student_id" id="student_id" placeholder="请在这里输入学号"></td>
                    </tr>
                    <tr>
                        <td>姓名：</td>
                        <td><input type="text" name="name" id="name" placeholder="请在这里输入名字"></td>
                    </tr>
                    <tr>
                        <td>年龄：</td>
                        <td><input type="text" name="age" id="age" placeholder="请在这里输入年龄"></td>
                    </tr>
                    <tr>
                        <td>性别：</td>
                        <td><input type="radio" checked class="radio radio-inline" name="sex" value="男"> 男
                            <input type="radio" class="radio radio-inline" name="sex" value="女"> 女
                        </td>
                    </tr>
                    <tr>
                        <td>出生日期：</td>
                        <td><input type="date" name="birthday" id="birthday" placeholder="请在这里输入出生日期"></td>
                    </tr>
                    <tr class="submitTR">
                        <td colspan="2" align="center">
                            <button type="submit" class="btn btn-success">提 交</button>
                        </td>

                    </tr>

                </table>
            </form>
        </div>
    </div>

</div>

第一种验证

//表单验证 是否为空 为空则提示，不为空则ajax提交数据
 function validateForm()
//验证学号
if($("#student_id").val()==""||$("#student_id").val()==null)
alert("学生id不能为空");
return false;

//验证姓名
if($("#name").val()==""||$("#name").val()==null)
alert("学生姓名不能为空");
return false;

//年龄
if($("#age").val()==""||$("#age").val()==null)
alert("学生年龄不能为空");
return false;

//出生日期
if($("#birthday").val()==""||$("#birthday").val()==null)
alert("学生出生日期不能为空");
return false;

//调用ajax提交到controller
return addStudent();
 

第二种验证

    $.fn.validate = function(tips)

           if($(this).val() == "" || $.trim($(this).val()).length == 0)
               alert(tips + "不能为空！");
               return false; //如果验证不通过，则不执行后面
           
           return true;
       
       function validateForm()
           //调用validate()
           var s_id = $("#student_id").validate("学号");
           var s_name = $("#name").validate("姓名");
           var s_age = $("#age").validate("年龄");
           var s_birth = $("#birthday").validate("生日");
           var bool= s_id && s_name && s_age && s_birth;
           return addStudent(bool);
       
 
       //提交表单数据到controller
       function addStudent(bool)
           if(bool)
               alert("snd");