表单验证

什么是jQuery formValidator？ jQuery formValidator表单验证插件是客户端表单验证插件。 在做B/S开发的时候，我们经常涉及到很多表单验证，例如新用户注册，填写个人资料，录入一些常规数据等等。在这之前，页面开发者（JavaScript开发者）需要编写大量的JavaScript来进行表单元素的校验，而这些校验在平时开发中不停的重复书写。 常见的校验如不能为空，必须满足长度要求，必须为数字，必须为Email等等。一般要判断的表单元素比较多，开发过程就显得枯燥无味——重复的代码不断重复，而且可能还要兼容多种浏览器，更多的考虑因素使人头疼不已。由于每个要校验的页面虽然逻辑基本相同，但是在大多数情况下，出于种种原因，开发者宁愿再编写一套JS文件，为了便于管理。 jQuery formValidator表单插件致力于改善这一过程。你只关心业务逻辑，而无需关系实现过程,只需简单的配置，无需写代码就能实现表单的检验。它包括常规检验功能和可扩展校验功能。针对每个表单元素你只需要写一行配置信息就能完成校验。而这些配置信息无需写入表单元素，实现了js代码和html代码的分离。这样做的好处，使B/S开发过程中，分工更加明确，页面设计着只需关心他的页面（设计的时候不必担心把脚本弄坏了），javascript开发者只需关心脚本的开发。 而插件本身包含的校验方式可以有无数种

官方文档：http://formvalidation.io var $formEntityProfileSearch = $("form[name=entityProfileSearch]"); var $formValidationEntityProfileSearch = $formEntityProfileSearch.data("formValidation"); //初始化表单验证 $formValidationEntityProfileSearch.revalidateField('companyFullName'); //支持单一字段重新验证 formValidationEntityProfileSearch.resetField(); //重置验证字段 一个表单多个提交按钮 formSubmit.off('success.form.fv.submit'); formSubmit.on('success.form.fv.submit', function(e) { var $form = $(e.target), // Form instance // Get the clicked button $button = $form.data('formValidation').getSubmitButton(); switch ($button.attr('name')

<a-form :form="form"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="适用阶段" hasFeedback> <a-select v-decorator="['mealCategory', {rules:[{required:true,message:'适用阶段不能为空'}]}]" @blur="getMealCategory" :disabled="isDisabled" placeholder="请选择适用阶段"> <a-select-option value="小学">小学</a-select-option> <a-select-option value="初中">初中</a-select-option> <a-select-option value="高中">高中</a-select-option> </a-select> </a-form-item> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="活动套餐名称" hasFeedback> <a-input placeholder="请输入活动套餐名称" v-decorator="['mealName', {rules:[

<form method="get" action="接口地址"> <input type="text" name="username"> <input type="password" name="passWord"> <input type="submit" name="Submit" value=“提交”> </form> 这段代码就是表单的最基础的写法。method是请求数据的get/post，action是接口。当我们点击了“提交”按钮后，后台会自动获取到所有的表单的name属性以及其对应的值。（我们不需要做任何做操。因为form表单本来就是用来提交数据的）。 再例如： 因此，表单中的元素比如有name属性，用来提交数据，但是submit则不需要 操作表单 用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。 HTML表单的输入控件主要有以下几种： 文本框，对应的 <input type="text"> ，用于输入文本； 口令框，对应的 <input type="password"> ，用于输入口令； 单选框，对应的 <input type="radio"> ，用于选择一项； 复选框，对应的 <input

* 基本内容 * HTML5目前最新的规范(标准)是2014年10月推出 * 2005年左右出现HTML5版本(非标准) * W3C组织(两个组织定义H5规范) * 学习(研究)HTML5是学习未来(将来主流) * HTML版本 - 第一阶段主要学习还是4版本(包含5版本) <header><nav> * HTML5版本之后,声明不再出现版本信息 * 有意地版本,以后可能不再会有新版本 * HTML5的规范内容实时更新 * 注意 * HTML5永远都不可能离开javascript. * HTML5在移动端支持好于PC端 * HTML5新表单 * input新类型 * email类型 - 验证是否包含"@" * url类型 - 验证是否包含"http://" * tel类型 - 只在移动端显示 * number类型 * range类型 * date类型 * color类型 * 表单新元素 * datalist元素 * progress元素 * meter元素 * output元素 * 表单新属性 * placeholder - 提供默认提示内容 * multiple - 允许输入多个值 * 多个值之间使用"," * autofocus - 自动获取焦点 * form - 允许表单元素定义在表单之外 * 表单新验证 * 验证属性 * required属性 * 验证当前元素值是否为空 *

表单 功能/作用 用于向服务器发送数据，实现用户与web服务器的交互 form表单内的标签有 input textarea select fieldset label form表单属性 accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。 action 规定向何处提交表单的地址（URL）（提交页面）。 autocomplete 规定浏览器应该自动完成表单（默认：开启）。 enctype 规定被提交数据的编码（默认：url-encoded）。如果是上传文件需要将enctype="multipart/form-data" method 规定在提交表单时所用的 HTTP 方法（默认：GET）。 name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 novalidate 规定浏览器不验证表单。 target 规定 action 属性中地址的目标（默认：_self）。 input type 文本text 密码框password 日期输入框date 复选框checkbox redio单选框 提交按钮submit 重置按钮reset 普通按钮button 隐藏输入框hidden 文本选择框file name 相当于表单提交后的数据的key值 value 相当于表单提交后的数据的value值 当input为各种按钮时

在 Bootstrap学习笔记（一） 排版 的基础上继续学习Bootstrap的表单，编辑器及head内代码不变。 3-1 基础表单 　　 单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。 　　在Bootstrap框架中，通过定制了一个类名` form-control `，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。　　 　　 1、宽度变成了100% 　　2、设置了一个浅灰色（#ccc）的边框 　　3、具有4px的圆角 　　4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 　　5、设置了placeholder的颜色为#999 <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱</label> <input type="email" class="form-control" id="exampleInputEmail" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class=

基础表单 表单中常见的元素主要包括： 文本输入框 、 下拉选择框、单选按钮、复选按钮 、 文本域 和 按钮 等。 当然表单除了这几个元素之外，还有 input 、 select 、 textarea 等元素，在Bootstrap框架中，通过定制了一个类名` form-control `，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。 1、宽度变成了100% 2、设置了一个浅灰色（#ccc）的边框 3、具有4px的圆角 4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999 注意：类名“ .form-control ”是添加在 input、select上面的。只控制输入框的样式。 注意：当 input 的类型是 checkbox 或者 radio 时，<label> 是包裹住了 <input> 的>。 水平表单 Bootstrap框架默认的表单是 垂直显示风格 ，但很多时候我们需要的 水平表单风格 （标签居左，表单控件居右）见下图。 <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label"

onSubmit是表单上(也只能是表单)用的,提交表单前会触发 onClick是按钮等控件上用的,用来触发点击事件. 用作数据验证的时候,可以选择在submit按钮上的onclick中验证,可以在onsubmit中验证.但是从事件触发顺序上来说,onclick更早.顺序是: 用户点击按钮->onclick->如果onclick返回有效或未处理onclick则提交表单->onsubmit->如果onsubmit未处理或返回true,则提交,否则取消提交. onsubmit中返回false会引起取消表单提交;onclick中返回false则会引起此次点击操作被判断为无效,则也就不会引起表单提交. 转载：http://blog.sina.com.cn/s/blog_62e606ed0100hgj6.html 来源： https://www.cnblogs.com/zhengjian6797/p/4557753.html

onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。 在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。 但是onclick比onsubmit更早的被触发。 　　 提交过程 1、用户点击按钮 ----> 2、触发onclick事件 ----> 3、onclick返回true或未处理onclick ----> 4、触发onsubmit事件 ----> 5、onsubmit未处理或返回true ------> 6、提交表单. onsubmit处理函数返回false，onclick函数返回false，都不会引起表单提交。 第一种：onsubmit <script language="javascript"> function CheckPost () { if (addForm.user.value == "") { alert("请填写用户名！"); addForm.username.focus(); return false; } if (addForm.title.value.length < 5) { alert("标题不能少于5个字符！"); addForm.title.focus(); return false; } return true; } <