码迷,mamicode.com
首页 > Web开发 > 详细

js表单验证

时间:2019-06-26 13:44:36      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:ace   check   bsp   val   不能   inpu   orm   his   日期   

 

<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表单验证

标签:ace   check   bsp   val   不能   inpu   orm   his   日期   

原文地址:https://www.cnblogs.com/19322li/p/11089157.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!