菜鸟的jquery学习记录（⼀）对form输⼊框的必填校验
跟着项⽬做了⼀个⼩功能，⾃⼰不会js和jquery，硬着头⽪写起了js，后来发现需要对输⼊框进⾏数据必填项校验，还有⼀些数据格式校验等，后来别⼈看了我写的⼀⼤堆js就笑了，告诉我⽤jquery的插件就可以了，直接拿过来使⽤就好，于是就⾃⼰写了⼀个简单的校验，
对于jq  validate⽹络上有很多的资源可以去查，在这⾥不赘述，闲话少叙，上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery校验学习 </title>
<script type="text/javascript" src="../js/lhgdialog/jquery-1.7.1.min.js"></script>
<script src="../js/validate/jquery.validate.js" type="text/javascript"></script>
<script src="../js/validate/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#username").focus();
$("#inputForm").validate({jquery在项目里是干啥的
rules: {
username: {
required: true
},
password:{
required: true
},
checkboxs:{
required:true
},
radios:{
required:true
},
selectone:{
required:true
}
},
messages: {
username: {
required: "请输⼊⽤户名"
},
password: {
required: "请输⼊密码"
},
checkboxs:{
required: "请勾选复选框"
},
radios:{
required: "请勾选单选框"
},
selectone:{
required: "请选择下拉框"
}
},
errorPlacement: function(error, element) {
if(element.is(':radio')||element.is(':checkbox')) {
//var eid = element.attr("name")；不知道为啥从⽹上到的会有这⼀⾏
error.appendTo(element.parent());
}else{
/
/var selector = "[name='" + element.attr("name") + "']";
//error.insertAfter($(selector)); 这两句是原来⼯程⾥的代码，我改成了下⾯这个也没错，
error.insertAfter(element);
});
});
</script>
<style type="text/css">
#forminfo dl dt{width:200px;}
</style>
</head>
<body>
<div ><input type="button" name="check" value="check" οnclick="validate();"></input></div>
<div id = "content">
<form id="inputForm" action="study.html" method="post">
<table>
<tr>
<td>username:</td>
<td>
<input type='text' name='username' id='username'></input>
</td>
</tr>
<tr>
<td>技能</td>
<td>
<input type="checkbox" name="checkboxs" value="checkbox1">1</input>
<input type="checkbox" name="checkboxs" value="checkbox2">2</input>
<input type="checkbox" name="checkboxs" value="checkbox3">3</input>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type='text' name='password' ></input>
</td>
</tr>
<tr>
<td>单选框</td>
<td>
<input type="radio" name="radios" value="checkbox1">1</input>
<input type="radio" name="radios" value="checkbox2">2</input>
<input type="radio" name="radios" value="checkbox3">3</input>
</td>
</tr>
<tr>
<td>下拉框</td>
<td>
<select name="selectone" >
<option value="">请选择</option><!-- jquery校验的是value为空的时候会有提⽰，所以没有这⼀⾏的话这个select校验永远为真-->      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit"></input>
</td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
新的问题来了，其实我要在页⾯上通过js拼接⼀个json串，所以我的拼接数据的项不再form⾥，拼接好的数据才会在form⾥，
那我的问题是，如何通过jquery校验⾮form表单的数据呢，虽然实⽤性不⼤，但把问题抛出来，希望有⼤神看到了，指点⼀下！万分感谢
update：！
当提交不是通过submit的时候可以尝试  button 的click⽅法
$("#form").validate();
$("#btn).click(function(){
if($("#form").valid()){
$("#form").submit();
}
});
可以尝试下，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。