js表单验证

Posted 19322li

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js表单验证相关的知识,希望对你有一定的参考价值。

 

<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");
           
           
        

 

以上是关于js表单验证的主要内容,如果未能解决你的问题,请参考以下文章

js表单验证的问题

JS表单验证-12个常用的JS表单验证

php js表单验证问题

js表单验证

JS表单验证代码

求一个表单验证的JS