表单

最新推荐文章于 2022-03-21 17:22:14 发布

a814163435

最新推荐文章于 2022-03-21 17:22:14 发布

阅读量257

点赞数

本文链接：https://blog.csdn.net/a814163435/article/details/82711438

版权

为什么使用表单选择器

表单选择器用于选取某些特定的表单元素，比如所有单选按钮或隐藏的元素

表单选择器

:input       匹配所input、textarea、select和button 元素       $("#myform :input")选取表单中所有的input、select和button元素
:text       匹配所有单行文本框                   $("#myform :text")选取email 和姓名两个input 元素
:password   匹配所有密码框                       $("#myform :password"?)选取所有<input type="password" />元素
:radio       匹配所有单项按钮                   $("#myform :radio")选取<input type="radio" />元素
:checkbox   匹配所有复选框                       $(" #myform :checkbox "?)选取<input type="checkbox " />元素
:submit       匹配所有提交按钮                   $("#myform :submit "?)选取<input type="submit " />元素
:image       匹配所有图像域                       $("#myform :image"?)选取<input type=" image" />元素
:reset       匹配所有重置按钮                   $(" #myform :reset "?)选取<input type=" reset " />元素
:button       匹配所有按钮                       $("#myform :button"?)选取button 元素
:file       匹配所有文件域                       $(" #myform :file"?)选取<input type=" file " />元素
:hidden       匹配所有不可见元素，或者type 为hidden的元素       $("#myform :hidden"?)选取<input type="hidden " />、style="display: none"等元素
:enabled   匹配所有可用元素                   $(" #userform :enabled"?)匹配form内部除编号输入框外的所有元素
:disabled   匹配所有不可用元素                   $(" #userform :disabled"?)匹配编号输入框
:checked   匹配所有被选中元素（复选框、单项按钮、select 中的option）   $(" #userform :checked"?)匹配“性别”中的“男”选项和“爱好”中的“编程”选项
:selected   匹配所有选中的option 元素               $(" #userform :selected"?) 匹配“家乡”中的“北京”选项

字符串验证
非空验证

if (mail == "") {
alert("Email不能为空");
return false;
}

字符串查找
indexOf()：查找某个指定的字符串值在字符串中首次出现的位置

var str="this is JavaScript";
var selectFirst=str.indexOf("Java");
var selectSecond=str.indexOf("Java",12);

表单验证事件和方法
表单验证需要综合运用元素的事件和方法

事件   onblur       失去焦点，当光标离开某个文本框时触发
   onfocus       获得焦点，当光标进入某个文本框时触发

方法   blur()       从文本域中移开焦点
   focus()       在文本域中设置焦点，即获得鼠标光标
   select()   选取文本域中的内容，突出显示输入区域的内容

正则表达式
简洁的代码
严谨的验证文本框中的内容

一个简单的表达式即可验证邮箱

var reg= /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(reg.test(email) ==false){
$email_prompt.html("电子邮件格式不正确,请重新输入");
return false;
}

表达式的模式

普通方式
var reg=/表达式/附加参数
var reg=/white/;
var reg=/white/g;

构造函数
var reg=new RegExp("表达式","附加参数")
var reg=new RegExp("white");
var reg=new RegExp("white","g");

简单模式
只能表示具体的匹配
var reg=/china/;
var reg=/abc8/;

复合模式
可以使用通配符表达更为抽象的规则模式
var reg=/^\w+$/;
var reg=/^\w+@\w+\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/;

RegExp对象
exec 检索字符中是正则表达式的区配，返回找到的值，并确定其位置
test 检索字符串中指定的值，返回true或false

RegExp对象的属性
global           RegExp对象是否具有标志g
ignoreCase       RegExp对象是否具有标志i
multiline       RegExp对象是否具有标志m

String对象
match           找到一个或多个正则表达式的匹配
search           检索与正则表达式相匹配的值
replace           替换与正则表达式匹配的字符串
split           把字符串分割为字符串数组

正则表达式符号

/…/       代表一个模式的开始和结束
^       匹配字符串的开始
$       匹配字符串的结束
\s       任何空白字符
\S       任何非空白字符
\d       匹配一个数字字符，等价于[0-9]
\D       除了数字之外的任何字符，等价于[^0-9]
\w       匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W       任何非单字字符，等价于[^a-zA-z0-9_]
.       除了换行符之外的任意字符
{n}       匹配前一项n次
{n,}       匹配前一项n次，或者多次
{n,m}       匹配前一项至少n次，但是不能超过m次
*       匹配前一项0次或多次，等价于{0,}
+       匹配前一项1次或多次，等价于{1,}
？       匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

HTML5新增属性
placeholder       提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失
required       规定输入域不能为空
pattern           规定验证input域的模式（正则表达式）

validityState对象
valueMissing       表单元素设置了required特性，则为必填项。如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false。
typeMismatch       输入值与type类型不匹配。HTML 5新增的表单类型如email、number、url等，都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false。
patternMismatch       输入值与pattern特性的正则表达式不匹配。如果输入的内容不符合pattern验证模式的规则，则patternMismatch属性将返回true，否则返回false。
tooLong           输入的内容超过了表单元素的maxLength 特性限定的字符长度。虽然在输入的时候会限制表单内容的长度，但在某种情况下，如通过程序设置，还是会超出最大长度限制。如果输入的内容超过了最大长度限制，则tooLong属性返回true，否则返回false。
rangeUnderflow       输入的值小于min特性的值。如果输入的数值小于最小值，则rangeUnderflow属性返回true，否则返回false。
rangeOverflow       输入的值大于max特性的值。如果输入的数值大于最大值，则rangeOverflow属性返回true，否则返回false。
stepMismatch       输入的值不符合step特性所推算出的规则。用于填写数值的表单元素可能需要同时设置min、max和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和。例如范围从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false
customError       使用自定义的验证错误提示信息。使用setCustomValidity( )方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。