js页面字段的必填验证方法

本文介绍了三种在JavaScript中实现页面表单必填字段验证的方法。第一种是直接调用validate()函数;第二种是在validate插件的submitHandler中处理提交;第三种是结合click事件和valid()方法进行验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

js页面头部引入<script language="javascript" src="../js/jquery.validate.js"></script>


<form action = "./PlanTaskAction.do" method="post" name="frmAdd" id="frmAdd" > 

 
        <div class="weui_cells_title">请添加计划信息!</div>
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_hd"><label class="weui_label">任务名称</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input name="taskname" id="taskname" type="text" class="weui_input required" maxlength="200" value="<%=Util.strNull(planTask.getTaskname())%>">
                </div>
            </div>
            
            
          <div class="weui_btn_area">
            <input type="submit"  class="buttonss" id="saveplantask"  value="保存 ">
        </div>
        <br>
        </div>
     
        </form>


点击保存按钮,先要对必填字段进行验证:

方法一:

<input type="submit"  class="buttonss" id="saveplantask" onClick="addTask();"  value="保存 ">

 $().ready(function() {  
      $("#frmAdd").validate( );  
    }); 

 function addTask(){
  frmAdd.action="./PlanTaskAction.do?doType=51";
  $("#frmAdd").submit(); 

}


方法二:

<input type="submit"  class="buttonss" id="saveplantask"  value="保存 ">

$().ready(function() {  
      $("#frmAdd").validate({  
          submitHandler:function(form){         
          addTask();         //验证必填成功后调用addTask()函数, 如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
          }      
      });  
    }); 

function addTask(){
  //frmAdd.action="./PlanTaskAction.do?doType=51";
  //frmAdd.submit();  //如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
 
   var datas = $('#frmAdd').serialize();  
        $.ajax({
type:"POST",
dataType:"text", //text支持中文,json乱码
contentType: "application/x-www-form-urlencoded; charset=utf-8",
url:"./PlanTaskAction.do?doType=51",
data: encodeURI(datas),
cache: false,
async: true,
success:function(data){
if(data=="ok"){
alert("保存成功");
document.getElementById('saveplantask').style.display="none";
// parent.location.reload();
} else{
alert("保存失败"); 
}
},
error:function(e){
alert("保存失败"); 
}
});  
   } 


方法三:

$().ready(function() {

$("#frmAdd").validate();

});

$().ready(function() {  
$("#btadd").click(function(){
if($("#frmAdd").valid()){            
         save();         //验证必填成功后调用save()函数   
        }          
  }); 
});  



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值