js实现字符串的去重,form表单的自动获取值返回为json

最新推荐文章于 2021-10-18 00:18:30 发布

IngloriousBastards

最新推荐文章于 2021-10-18 00:18:30 发布

阅读量332

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/ghost_9707/article/details/79780644

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现的表单验证案例，包括账号、密码等字段的长度检查，以及对复选框和单选按钮的选择验证。通过JavaScript自定义函数实现了表单数据的收集与格式化。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.3.js" ></script>
	</head>
	<body>
		<form id="submit">
			<table>
				<tr>
					<td>
						<span>账号</span>
					</td>
					<td>
						<input  type="text" name="username"/>
					</td>
				</tr>
				<tr>
					<td>
						<span>密码</span>
					</td>
					<td>
						<input  type="password" name="password"/>
					</td>
				</tr>
				<tr>
					<td>
						<span>验证码</span>
					</td>
					<td>
						<input  type="text" name="vcode"/>
					</td>
				</tr>
				<tr>
					<td>
						<span>性别</span>
					</td>
					<td>
						男<input type="radio" name="sex" value="male"/>
						女<input type="radio" name="sex" value="female"/>
					</td>
				</tr>
				<tr>
					<td>
						<span>爱好</span>
					</td>
					<td>
						足球<input type="checkbox" name="football" />
						篮球<input type="checkbox" name="baskatball" />
						球<input type="checkbox"   name="ball"	/>
					</td>
				</tr>
				<tr>
					<td>
						<span>描述</span>
					</td>
					<td>
						<textarea name="desc"></textarea>
					</td>
				</tr>
				<tr>
					<td>
					<input type="button" id="button" value="提交"/>
					</td>
				</tr>
				
				
			</table>
		</form>
		<script>
			String.prototype.trim=function(){
				if(this){
					return this.replace(/(^\s*) |(\s*$)/g,"");
				}
			}
			$(function (){
				$("#button").click(function (){
					var json=getFormData($("#submit"));
					console.log(json);
				});
			});
			function getFormData(Form){
				var json="{";
				var checkbox="{";
				var radio="";
				var len=Form[0].elements.length;
				for(var i=0;i<len;i++){
					var _name = $(Form[0].elements[i]).parent().prev().children().html();
					var typeV = Form[0].elements[i].type;
					var nameV = Form[0].elements[i].name;
					var valueV = Form[0].elements[i].value.trim();
					//console.log(nameV+"=="+valueV);
					if(typeV == "text" || typeV=="password" || typeV=="textarea"){
						if(valueV.length<6){
							alert(_name+"长度不符合要求");
							Form[0].elements[i].focus();//聚焦到当前输入框
							return ;
						}
						json+='"'+nameV+'":"'+valueV+'",';
					}else if(typeV == "checkbox"){//复选框
						if(Form[0].elements[i].checked){
							checkbox+='"'+nameV+'":"checked",'
						}
					}else if(typeV=="radio"){
						if(Form[0].elements[i].checked){
							radio+='"'+nameV+'":"'+valueV+'",';
						}
					}
				}
				if(checkbox.length<=1){
					alert("复选框至少选中一个");	
					return ;
				}
				if(radio <= 1){
					alert("单选框至少选中一个");	
					return ;
				}
				json=json+'"checkbox":'+checkbox.substr(0,checkbox.length-1)+'}}';
				return JSON.parse(json);
			}
		</script>
	</body>
</html>