【html+js+jquery简单表单验证和删查】

结果图

1：需求包

2：文件1

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>login</title><script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script></head><body><div id="login"><form action="table.html"><fieldset><legend>注册信息</legend><table border="0"><tr><td>用户名:</td><td><input id="idname" type="text" class="txt" /></td><td>2-6个长度的任意字符</td></tr><tr><td>昵称:</td><td><input id="name" type="text" class="txt" /></td><td>2-4个长度的任意字符</td></tr><tr><td>密码:</td><td><input id="password" type="password" class="txt" /></td></tr><tr><td>确认密码:</td><td><input id="passWord" type="password" class="txt" /></td></tr> <tr><td><input id="btn_submit" type="submit" value="注册" /></td></tr></table></fieldset></form></div><script type="text/javascript">$(function(){$("#btn_submit").click(function(){var btn_idname = $("#idname").val();var btn_name = $("#name").val();//长度不合格，不允许跳转if(btn_idname.length<2||btn_idname.length>6){return false;}else if(btn_name.length<2||btn_name.length>4){return false;}})})</script></body>
</html>

3：文件2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>table</title><script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script><style>th{width: 120px;}input{width: 115px;}</style></head><body><table border="1"><tr><th colspan="6">书籍购买</th></tr><tr><th>书名</th><th>类型</th><th>价格</th><th>数量</th><th>小计</th><th>操作</th></tr><tr><td>《西游记》</td><td>小说</td><td>40</td><td>2</td><td>80</td><td><a href="#">删除</a></td></tr></table><p>书名<input id="bookname" type="text"/>类型<input id="leixin" type="text" />价格<input id="jiage" type="text" />数量<input id="shulian" type="text" /><input id="insertBtn" type="button" value="添加" /></p><script type="text/javascript">$(function(){//为删除按钮绑定删除事件$("table tr td a").click(function(){//删除a标签所在的tr标签$(this).parent().parent().remove();})//为插入数据绑定新增事件$("#insertBtn").click(function(){//拿输入值var bookname = $("#bookname").val();var leixin = $("#leixin").val();var jiagea = $("#jiage").val();var shuliana = $("#shulian").val();//小计的计算var xiaoji = jiagea*shuliana;//构建一个新的行var $tr = $("<tr><td>"+bookname+"</td><td>"+leixin+"</td><td>"+jiagea+"</td><td>"+shuliana+"</td><td>"+xiaoji+"</td><td><a href='#'>删除</a></td></tr>");//将新行插入table中$("table").append($tr);//为新加的a标签绑定单机事件$tr.find("a").click(function(){//删除a标签所在的tr标签$(this).parent().parent().remove();})})})</script></body>
</html>

【html+js+jquery简单表单验证和删查】相关推荐

js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
Jquery ValidateEngine表单验证
Jquery ValidateEngine表单验证用法:http://www.position-relative.net/creation/formValidator/demoValidators. ...
jQuery的表单验证
jQuery的表单验证直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
JQuery实现表单验证(注册页面)
注册页面功能实现: 验证会员名密码不能为空或者包含空格,并且保证长度至少6位验证邮箱符合规则,并且不能为空重复密码要与密码一致 1.页面的样式 <form action="#&qu ...
jQuery实现表单验证
1.基于html表单,利用jQuery实现表单验证功能. 2.html基本结构和样式: 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
JQuery.validationEngine表单验证插件
一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...
基于猫冬的 jQuery formValidator表单验证的asp.net 控件
为了方便在asp.net中使用,封装了一下 <猫冬的 jQuery formValidator表单验证> 控件其实也不是什么控件,只是一个类,方便生成前台js. 特点: 1.后台生成的 ...

【html+js+jquery简单表单验证和删查】

结果图

1：需求包

2：文件1

3：文件2

【html+js+jquery简单表单验证和删查】相关推荐

最新文章

热门文章