菜鸟的jquery学习记录（一）对form输入框的必填校验

最新推荐文章于 2024-03-14 07:00:00 发布

原创最新推荐文章于 2024-03-14 07:00:00 发布 · 1.3w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jquery validate

jquery validate checkbox radio select 专栏收录该内容

1 篇文章

订阅专栏

初学者通过项目实践学习jQuery，使用validate插件进行表单必填项和数据格式校验。遇到问题：如何验证不在form元素内的数据。寻求解决方案，期望通过jQuery校验非表单字段，提交非submit方式时使用button click方法。

跟着项目做了一个小功能，自己不会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({
			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" onclick="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>
	</form>
</div>
</body>
</html>

新的问题来了，其实我要在页面上通过js拼接一个json串，所以我的拼接数据的项不再form里，拼接好的数据才会在form里，

那我的问题是，如何通过jquery校验非form表单的数据呢，虽然实用性不大，但把问题抛出来，希望有大神看到了，指点一下！万分感谢

update：！

当提交不是通过submit的时候可以尝试 button 的click方法

$("#form").validate();
$("#btn).click(function(){
    if($("#form").valid()){
     $("#form").submit();
 }
});

可以尝试下，

菜鸟的jquery学习记录 （一） 对form输入框的必填校验

菜鸟的jquery学习记录（一）对form输入框的必填校验