JS表单认证大全

合集下载

Struts2 极速表单验证框架 说明书

Struts2 极速表单验证框架 说明书

1 Struts2极速表单验证框架使用说明书struts ‐plusStruts enhancement, includes quick form validation, permission mgmt. Struts 框架增强, 包括极速表单验证, 权限管理等.子模块之Struts 2 极速表单验证框架作者: 刘长炯(beansoft@)日期: 2010‐01‐20版本: 0.1修订历史2010‐01‐20 初始版1 Struts2极速表单验证框架使用说明书..................................................................................1 2 Struts 2 极速表单验证框架简介...........................................................................................2 3 项目许可...................................................................................................................................3 4 下载本项目...............................................................................................................................3 5 演示应用...................................................................................................................................4 6 整合步骤step by step...............................................................................................................8 7 验证规则表达式详解.............................................................................................................12 8 和RapidValidation 配合实现前后台一致验证.......................................................................13 9 如何扩展验证规则.................................................................................................................14 10 下一版本开发计划 (17)2 Struts 2 极速表单验证框架简介Struts Plus, Struts + 项目, 计划包含极速表单验证框架, 权限管理等子模块. 目前主要关注于 Struts 2 方面的生产力提高项目, 主要基于注解方式进行增强, 并提供抽象层, 使项目仅仅依赖于 Struts 本身, 而不需要强制您使用某种业务层和数据层框架. 项目的许可采用MIT协议, 您可自由的使用本项目, 但需遵循MIT协议保留本人版权签名及MIT协议本身.本文主要讲述子模块Struts 2 极速表单验证框架(Struts 2 QuickFormValidation).本验证机制基于表达式和注解(Annotation), 验证规则的扩展通过实现验证接口进行.诞生历史:2009年12月18日晚提出框架原理, 并于2009年12月19日晨提出实现思路, 最终框架核心初步完成于2009年12月20日(周日), 2010‐01‐20日整理发布.在项目的开发中, 表单验证需要用去开发者大量的时间, 尤其是为了保证前后台的验证规则一致时, 更是需要大量的人力物力. 虽然Struts 2本身的验证框架可以保证前后台一致, 但在使用和整合方式上, 需要编写大量的Validation XML文件, 费力费时容易出错, 尤其是实际开发中需要反复调整各种验证规则及其组合, 这时就更加困难; 扩展Struts 2的验证框架更是需要比较繁琐的步骤. 针对这些挑战, 笔者试图提供一种简便易用的方式来进行表单验证, 即基于Java注解和验证规则表达式.如下面的代码即可实现如下的验证要求: 1) 用户名不能为空, 最小长度5, 最大长度10, 只能输入英文字母; 2) 年龄字段只能输入数字, 最小值为18, 最大值为100; 验证失败时, 转向input页面并显示出错信息: ${validationErrors}.@FormValidator(input="form_tag", value=",用户名,required min-length-5 max-length-10 validate-alpha;" +"age,年龄,validate-digits min-value-18 max-value-100;") public String form_tag() throws Exception {return SUCCESS;}•最快速的后台表单验证框架•简洁,快速的验证语法•无需编写验证提示信息•错误消息在指定地方显示•支持组合验证•易于扩展•基于标准的Java Annotation添加验证,易于和现有项目的无缝集成•特殊应用场景支持,如:密码确认,结束日期必须大于开始日期•支持前后台一致的验证规则本框架主要是为了和前台基于JavaScript的开源验证框架RapidValidation(/p/rapid‐validation/ )使用统一的验证规则, 最大限度的减少重复的后台验证代码, 使用方式简便, 扩展方便.本框架依赖于:z Struts 2z Java 5或者更高版本3项目许可The MIT LicenseCopyright (c) 2010 刘长炯(beansoft@)Permission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the "Software"), to dealin the Software without restriction, including without limitation the rightsto use, copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included inall copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS INTHE SOFTWARE.4下载本项目您可访问/p/struts‐plus/downloads/list 来获取最新源代码包文件名说明大小struts2-quickvalidation-plugin-1.0-src.jar Struts 2 QuickFormValidation 26.81.0 sources 源码Featured KBstruts2-quickvalidation-plugin-1.0.jar Struts 2 QuickFormValidation1.0 jar Featured 26.8 KBstruts2-quickvalidation-demo.war 演示war包,部署至Tomcat6运行Featured 3.4 MBJavascript_RapidValidation.pdf JavaScript Rapid Validation框架的详细使用及规则说明文档(转载)176KB5演示应用可下载示例应用来体验Struts极速验证框架, 下载地址为:http://struts‐/files/struts2‐quickvalidation‐demo.war . 放入Tomcat后即可查看运行效果. 您可以本demo应用为基础快速的进行开发.本演示包含三个内容:纯后台表单验证前后台一致表单验证(前台验证基于RaplidValidation)前后台一致表单验证(Struts 2 Form 标签)本war包中的唯一的.java文件源码如下:package actions;import com.opensymphony.xwork2.ActionSupport;import common.validation.FormValidator;public class HelloWorldAction extends ActionSupport {// 或者implements Action {@FormValidator(input="form", value=",用户名,required min-length-5 max-length-10 validate-alpha;" +"age,年龄,validate-digits min-value-18 max-value-100;" +"password,密码,required;" +"password2,重复密码,required equals-password-原始密码;" +"email,,validate-email;" +"gender,性别,validate-one-required;" +"ip,,validate-ip;" +"date,生日,validate-date;" +"num1,数字1,validate-number;" +"num2,数字2,validate-number less-than-num1-数字1;" +"float,数字范围,float-range-1-10;" +"address,地址,validate-chinese;" +"zip,邮编,validate-zip;" +"id_num,身份证,validate-id")public String form() throws Exception {return SUCCESS;}@FormValidator(input="form_js", value=",用户名,required min-length-5 max-length-10 validate-alpha;" +"age,年龄,validate-digits min-value-18 max-value-100;" +"password,密码,required;" +"password2,重复密码,required equals-password-原始密码;" +"email,,validate-email;" +"gender,性别,validate-one-required;" +"ip,,validate-ip;" +"date,生日,validate-date;" +"num1,数字1,validate-number;" +"num2,数字2,validate-number less-than-num1-数字1;" +"float,数字范围,float-range-1-10;" +"address,地址,validate-chinese;" +"zip,邮编,validate-zip;" +"id_num,身份证,validate-id")public String form_js() throws Exception {return SUCCESS;}@FormValidator(input="form_tag", value=",用户名,required min-length-5 max-length-10 validate-alpha;" +"age,年龄,validate-digits min-value-18 max-value-100;") public String form_tag() throws Exception {return SUCCESS;}}下面是三个演示的效果:6整合步骤step by step1. 将文件struts2‐quickvalidation‐plugin‐1.0.jar放入Web项目的WEB‐INF/lib目录下;2. 修改您自己的代码的src/struts.xml中的package定义继承自quickValidation;示例代码:<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN""/dtds/struts-2.0.dtd"><struts><package name="test" namespace="" extends="quickValidation"> <action name="helloworld" class="actions.HelloWorldAction"> <result name="index">/index.jsp</result><result name="success">/helloworld.jsp</result></action></package></struts>3. 使用注解加入验证规则表达式;在每个需要调用的Action的入口方法处, 加入@FormValidator注解.注解的完整语法如下:@common.validation.FormValidator(input="出错时需要返回的result别名", enabled=true/false, value="表单参数名称1,表单参数中文提示信息1,规则1 规则2…; 表单参数名称2,表单参数中文提示信息2,规则1 规则2…;更多字段验证信息")input参数: 可选. 如果不指定, 则出错时仍然继续进入到Action方法中; 如果指定, 则在表单验证出错时, 返回到给定的result中, 例如: 原始表单输入页面或者统一的错误输出页面; enabled参数: 可选. 是否启用此验证规则, 如果不指定, 则忽略解析注解, 不进行任何验证; value参数: 必填选项, 可输入一个或者多个表单参数验证规则. 简单说就是: [字段1验证配置];[字段2验证配置];…. 虽然不建议, 然而字段验证配置可以留空, 此时不会进行任何验证处理.而每个验证配置的格式如下:表单参数名称: 必填选项. 指向输入的表单控件的名称(input的name);表单参数中文提示信息: 可选. 如果为空, 则和表单参数名称相同. 不为空时, 则显示在出错时的信息提示的开头位置;规则1 规则2…: 可选. 理论上可加入任意多个验证规则, 以单个空格隔开. 在验证开始后, 依次进行每个规则的验证并加入提示信息. 需要注意的是, 除required规则之外的所有规则只有当用户输入的字段值非空时, 才进行有效性验证, 如此便可避免所有字段都成为必填字段的问题发生.每个规则本身则由两部分组成: 规则名‐规则子名‐参数1‐参数2‐参数3‐….规则名和规则子名是固定名称, 不能任意填写, 这两个名称对应一个具体的规则实现类.其中参数是必填选项, 参数的意义则需要参考下一节的验证规则表达式中的说明. 下面举例说明若干验证规则:required 这是特殊规则, 不带规则子名, 也没有额外的参数;float‐range‐1‐20 其中float‐range分别是规则名和规则子名, 而1和20则分别是两个参数. 特别需要注意的是有负数时的情况此时参数列表变为: float-range--1--20, 此时参数值分别为‐1和‐20.如果需要给另一字段加入验证规则, 则以分号隔开.下面是若干验证的示例及其解释:规则 解释@FormValidator 空的验证规则, 不进行任何操作@FormValidator("username,用户名,required min‐length‐5") 对username字段进行验证, 规则为必填, 最小长度为5; 出错时分别提示:用户名不能为空用户名的长度不能小于5, 当前长度为1.由于没有指定input参数, 所以当验证失败时, 仍然会继续进入到业务逻辑处理, 相关的错误信息则存入request 的attribute中.@FormValidator("username, ,required min‐length‐5")由于没有指定字段的中文提示, 因此出错时将提示:username的长度不能小于5, 当前长度为1.@FormValidator(input="index",value=" username,用户名,required min‐length‐5”) 这大概是最常用格式的验证规则的写法了. 此例和上例的区别为: 所以当验证失败时, 将进入input参数所指定的出错信息显示页面.@FormValidator(input="index",enabled=false,value=" username,用户名,required min‐length‐5”) 忽略所有验证规则处理, 常用于调试阶段.@FormValidator(input="index",value=" username,用户名,required min‐length‐5;password2,重复密码,required equals‐password‐原始密码;”) 此规则加入了对重复密码字段的验证, 出错时将提示:重复密码和原始密码的输入不一致@FormValidator(input="index",value="username,用户名,required min‐length‐5;password2,重复密码,required equals‐password;”) 此规则省略了另一字段的中文描述, 出错时将提示:重复密码和前面的输入不一致以下为一个完整的Action类示例代码:import com.opensymphony.xwork2.ActionSupport;import common.validation.FormValidator;public class HelloWorldAction extends ActionSupport {@FormValidator(input="index", value="username,用户名,requiredmin-length-5 max-length-10 validate-alpha;" +"age,年龄,validate-digits min-value-18max-value-100;password,密码,required;" +"password2,重复密码,required equals-password-原始密码;" +"gender,性别, validate-one-required")public String execute() throws Exception {return SUCCESS;}}4. 修改前台显示验证结果.根据Action的不同, 前台的显示划分为两类:普通的错误显示:所有错误信息: ${validationErrors}返回的内容是一个字符串, 显示了所有的出错信息, 而出错字体的颜色则需要用户自己去设置.出错信息的显示格式是以<br>分开的, 例如:用户名不能为空<br>密码不能为空<br>重复密码不能为空<br>性别必须至少选中一项<br>另一种推荐的做法是让Action继承自Struts2中的ActionSupport, 此时则可用Struts 2的标签来显示出错信息, 可定位到具体的字段:<%@ taglib prefix="s" uri="/struts-tags" %><s:actionerror /><s:fielderror/><s:form action="helloworld.action" method="post"><s:textfield name="username" label="用户名" /><s:password name="password" label="密码" /><s:submit/></s:form>或者使用纯JSP来编写页面来定位到单条错误:用户名: <input name=username value=${ername}> ${ername[0]}下面给出这两种写法的完整示例:<%@ page pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags" %><html><head><style>.errorMessage {color:red;}.errorLabel {font-weight:bold}</style><title>测试页面</title></head><body><s:actionerror /><form action="helloworld.action" method=postenctype="multipart/form-data">用户名: <input name=username value=${ername}>${ername[0]} <br>年龄: <input name=age value=${param.age}><br>密码: <input name=password><br>密码重复: <input name=password2><br>邮件: <input name=email><br>性别: <input type=checkbox name=a>男<input type=checkbox name=a>女<br> IP地址: <input name=ip><br>数字1: <input name=num1>数字2: <input name=num2><br>日期:<input name=date><br>附件: <input name=file type=file><br><input type=submit value="提交"></form><span class="errorMessage">${validationErrors}</span>Struts 2表单标签示例:<s:fielderror/><s:form action="helloworld.action" method="post"><s:textfield name="username" label="用户名" /><s:password name="password" label="密码" /><s:submit/></s:form></body></html>7验证规则表达式详解说明: 加红色背景的部分是目前尚不支持的验证规则; 加黄色背景的是增加了第二个可选参数的规则(和前台验证规则略有变动).验证表达式 描述 示例 required 非空域,全部空格也算空validate-number 一个有效数validate-digits 只能包含0-9任意个数字validate-alpha 只能是字母a-z, A-Zvalidate-alphanum 只能是字母和数字的组合validate-email 只能是有效的emailvalidate-url 只能是有效的url地址validate-one-required 至少有一个被选中,例如一组checkbox, radiobutton,它们最好包含在一个div和span中validate-integer 只能是整数,可以有正负号validate-ip 有效的IP地址min-length-$number 最小长度是$number (此处$some表示一个特定的值)最小长度为8: min-length-8max-length-$number 最大长度是$number 最大长度为8:max-length-8 max-value-$number 输入域的最大值是$number 最大值为8.1:max-value-8.1 min-value-$number 输入域的最小值是$number 最大值为-8.1:max-value--8.1equals-$otherInputId-$othe rInputLabel 必须和某个input field相等,用于密码两次输入验证等,$otherInputLabel是可选项,用来描述另一字段信息equals-password重复密码和原始密码输入不一致:equals-password-原始密码less-than-$otherInputId-$o therInputLabel 小于某个input fieldless-than-otherInputId,多用于结束日期不能小于开始日期的需求,$otherInputLabel是可注:相等时也不能通过选项,用来描述另一字段信息great-than-$otherInputId-$ otherInputLabel 大于某个input fieldless-than-otherInputId,$o therInputLabel是可选项,用来描述另一字段信息validate-date-$dateFormat 只能是日期,$dateFormat为日期格式,$dateFormat的可选,默认格式为yyyy-MM-DD validate-date-yyyy年MM月dd 日validate-file-$type1-$type 2-$typeX 验证文件输入域选择的文件类型只能为声明的$type1 –$typeX中的一种validate-file-png-jpegfloat-range-$minValue-$max Value 必须是$minValue到$maxValue的一个浮点数1至20:float-range-1-20int-range-$minValue-$maxVa lue 必须是$minValue到$maxValue的一个整数length-range-$minLength-$m axLength 输入字符串的长度必须在$minLength到$maxLength之间validate-pattern-$RegExp 通过自定义正则表达式$RegExp来验证输入域的正确性 vaidate-patter n-/a/givalidate-chinese 只能是中文(以下为中国的相关验证)validate-phone 有效的电话validate-mobile-phone 有效的手机号validate-id-number 验证是否有效的身份证号码validate-zip 验证邮政编码validate-qq 验证QQ号码8和RapidValidation配合实现前后台一致验证RapidValidation (/p/rapid‐validation/) 是专注于前台的验证框架, 例如下面的例子:<!-- 为form增加required-validate class,标识需要验证form --><form id='helloworld' action="#" class='required-validate'> helloworld:</br><!--通过class添加验证: required表示不能为空,min-length-15表示最小长度为15 --><textarea name='content' class='requiredmin-length-15'></textarea></br><input type='submit' value='Submit'/><input type='reset' value='Reset'/></form>其对应的后台验证规则为:@FormValidator(input="index",value=" content,helloworld,required min‐length‐15”)请注意比较异同, 不同部分已经以红色粗体进行了区分, 相同部分则以绿色粗体标识.大家可以看到, 两者很容易就实现了一致的前后台验证规则.相关的说明文档请访问: /p/rapid‐framework/wiki/rapid_validation , 另外本项目也提供了一份完整文档的转载, 包含详细的规则说明文档和整合步骤:(http://struts‐/files/Javascript_RapidValidation.pdf ).9如何扩展验证规则要扩展验证只需要实现IValidator即可即可, 并将实现类放入包 common.quickvalid.validators下. 下面是IValidator接口定义:package common.quickvalid.validators;import java.util.Map;/***所有验证器的抽象接口.*@author beansoft*日期:2009-12-20*/public interface IValidator {/***实现验证方法.*@param fieldName字段name*@param fieldDescription出错时的字段描述信息*@param params参数列表<String key, String[] values>表单参数Map *@param args参数列表*@return验证信息,为空时表示没有任何出错信息,通过验证*/public String doValidation(String fieldName, String fieldDescription, Map<String, String[]> params, String... args) ;/***获取验证器本身的参数列表.*@return*/public String[] getArgs();/***设置验证器本身的参数列表*@param args-一个或者多个参数,允许为null*/public void setArgs(String[] args);/***获取原始表达式.*@return*/public String getExpression();/***设置原始表达式,用于日期,正则等验证方式,避免和-号冲突.*@param Expression*/public void setExpression(String expression);}在实践中, 已经提供了几种比较常见的实现类的抽象基类, 它们是:BaseValidator, 抽象的验证器实现, 仅实现了 setter和getter;BaseRegexValidator(继承自BaseValidator), 基于正则表达式验证的基类; BaseTwoNumberValidator(继承自BaseValidator), 提供基于两个数字规则的验证, 可获取两个参数(含‐号).类名有一定规则, 将第一个减号替换为下划线即可, 例如:float-range-$minLength-$maxLength 对应的类名是: length_range.下面则给出一些实现类, 供参考:手机号的验证:package common.quickvalid.validators;/***手机号验证*TODO更多号段的支持?*@author beansoft**/public class validate_mobile extends BaseRegexValidator {@Overridepublic String getMessage() {return"只能输入正确的手机号码,如:138********";}@Overridepublic String getRegEx() {return"(^0?[1][35][0-9]{9}$)";}}数字范围的验证:package common.quickvalid.validators;import java.util.Map;/***表单域取值浮点数验证*@author beansoft**/public class float_range extends BaseTwoNumberValidator {public String doValidation(String fieldName, String fieldDescription,Map<String, String[]> params, String... args) { super.setParams(params);String value = getValue(fieldName);super.parseTwoNumberArgs();//重新分析=args// 非空时进行验证if(value != null && value.length() > 0) {boolean result = false;try {(Double.parseDouble(value) <=resultDouble.parseDouble(args[0])) ||(Double.parseDouble(value) >Double.parseDouble(args[1]));} catch(Exception ex) {return fieldDescription + "的输入值不是有效的数字";}if(result) {return fieldDescription + "的输入值" + value + "应该为" + args[0] + "到" + args[1] + "之间的数字";}}return null;}}10下一版本开发计划z将验证规则表达式解析和执行部分独立出来作为核心引擎z兼容JDK 1.4 并提供独立调用的接口z提供Struts 1下的插件机制z提示文字国际化z增强前台验证, 提供时分秒的验证功能如果您对本项目有兴趣, 欢迎加入.。

javascript程序设计正则表达式应用-实现表单验证实验总结

javascript程序设计正则表达式应用-实现表单验证实验总结

javascript程序设计正则表达式应用-实现表单验证实验总结JavaScript程序设计正则表达式应用实现表单验证实验总结在Web开发中,表单验证是一个非常重要的环节,它可以帮助我们确保用户输入的数据符合我们的预期和要求。

而JavaScript的正则表达式是一种强大的工具,可以用来对用户输入进行有效的验证和筛选。

本文将基于表单验证的实验,一步一步介绍如何利用JavaScript正则表达式来实现表单验证,并对实验过程进行总结和评估。

第一步:实验目标和准备工作在开始实验之前,我们需要明确实验的目标和准备相关的材料和环境。

实验目标:使用JavaScript正则表达式来实现表单验证,并确保用户输入的数据符合预期和要求。

准备工作:1. 一个Web开发环境,例如Apache服务器和一个支持JavaScript的浏览器。

2. 一个包含HTML表单元素的网页文件,例如一个注册表单。

第二步:了解正则表达式的基本语法和规则在开始实验之前,我们需要对正则表达式的基本语法和规则有一定的了解。

简要介绍一下正则表达式的基本语法和常用规则:1. 字符匹配- 字符:直接匹配字符本身。

- 转义字符:使用'\'来转义特殊字符的匹配。

2. 特殊字符- 点号(.):匹配任意字符。

- 加号(+):匹配一个或多个前面的字符。

- 星号(*):匹配零个或多个前面的字符。

- 问号(?):匹配零个或一个前面的字符。

- 花括号({}):用于指定匹配数量的范围。

3. 字符类和取反- 字符类([...]):匹配方括号中的任意一个字符。

- 取反([^...]):匹配除了方括号中的任意一个字符以外的字符。

4. 边界匹配- 开始边界(^):匹配字符串的开头。

- 结束边界():匹配字符串的结尾。

5. 数量限定- 数字(\d):匹配一个数字字符。

- 非数字(\D):匹配一个非数字字符。

- 字母(\w):匹配一个字母字符。

- 非字母(\W):匹配一个非字母字符。

js案例大全

js案例大全

js案例大全JavaScript(简称JS)是一种高级的、解释型的编程语言。

它是一种动态类型、弱类型、基于原型的语言,内建支持类型。

JavaScript是世界上最流行的编程语言之一,也是前端开发的核心技术之一。

在本文中,我们将为大家介绍一些常见的JavaScript案例,希望能够帮助大家更好地理解和运用JavaScript。

1. 表单验证。

表单验证是Web开发中常见的需求之一。

通过JavaScript,我们可以轻松实现对表单输入内容的验证,比如验证用户名、密码、邮箱、手机号等。

以下是一个简单的表单验证案例:```javascript。

function validateForm() {。

var username = document.forms["myForm"]["username"].value;var password = document.forms["myForm"]["password"].value;if (username == "" || password == "") {。

alert("用户名和密码不能为空");return false;}。

}。

```。

在上面的案例中,我们定义了一个validateForm函数来验证表单输入内容,如果用户名和密码为空,则弹出警告框,并且阻止表单提交。

这样可以有效地提高用户体验,避免用户输入不合法的内容。

2. 动态创建元素。

JavaScript可以帮助我们动态地创建、修改和删除HTML元素。

这在Web开发中非常有用,可以使页面更加灵活和动态。

以下是一个动态创建元素的案例:```javascript。

function addElement() {。

var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello, World!");newDiv.appendChild(newContent);var currentDiv = document.getElementById("div1");document.body.insertBefore(newDiv, currentDiv);}。

js验证格式大全

js验证格式大全
returnfalse;
}
if(!isEnglish(.value)){
alert("英文名不合法!");
.focus();
returnfalse;
}
if(!isChinese(name.value)){
alert("中文名不合法!");
name.focus();
6.验证油箱格式
<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
for(i =0;i<name.length;i++){
if(name.charCodeAt(i) >128)
returnfalse;
}
returntrue;
}
functionisChinese(name)//中文值检测
{
if(name.length == 0)
returnfalse;
for(i = 0; i < name.length;i++){
return true;
else
alert("oh");
}
</SCRIPT>
<input type=text onblur=isEmail(this.value)>
7.屏蔽关键字(这里屏蔽***和****)

js form表单参数

js form表单参数

js form表单参数JavaScript表单参数的作用与用法一、表单参数概述表单参数是指表单中用户输入的各种数据,比如文本框中输入的文本、单选框或复选框的选中状态、下拉列表框的选中项等。

通过JavaScript可以获取这些参数的值,并进行相应的处理。

二、获取文本框的值文本框是表单中最常见的元素之一,用户可以在文本框中输入任意文本。

在JavaScript中,可以使用`value`属性来获取文本框的值。

例如,假设有一个id为`username`的文本框,可以使用以下代码获取其值:```var username = document.getElementById('username').value;```三、获取单选框的选中状态单选框是一组选项中只能选择一个的元素。

在HTML中,可以使用`<input type="radio">`来创建单选框。

要获取单选框的选中状态,可以通过遍历单选框组,判断每个单选框的`checked`属性是否为`true`来确定是否选中。

以下是一个示例代码:```var radios = document.getElementsByName('gender');var gender = '';for (var i = 0; i < radios.length; i++) {if (radios[i].checked) {gender = radios[i].value;break;}}```四、获取复选框的选中状态复选框是一组选项中可以选择多个的元素。

在HTML中,可以使用`<input type="checkbox">`来创建复选框。

要获取复选框的选中状态,可以通过遍历复选框组,判断每个复选框的`checked`属性是否为`true`来确定是否选中。

以下是一个示例代码:```var checkboxes = document.getElementsByName('hobby');var hobbies = [];for (var i = 0; i < checkboxes.length; i++) {if (checkboxes[i].checked) {hobbies.push(checkboxes[i].value);}}```五、获取下拉列表框的选中项下拉列表框是一组选项中只能选择一个的元素,用户可以通过点击下拉列表框展开选项,并选择其中的一项。

amis校验表单项

amis校验表单项

amis校验表单项全文共四篇示例,供读者参考第一篇示例:对于大部分人来说,填写表单时可能并不是一件特别繁琐的事情,但对于开发者来说,表单校验却是十分重要的一个环节。

在网站或应用的开发过程中,表单作为用户与系统之间的纽带,承载了用户输入的关键信息。

为了确保用户输入的信息的合法性和有效性,开发者需要对表单进行校验,防止用户输入错误或恶意输入。

而在前端开发中,Amis提供了丰富的表单校验组件,帮助开发者轻松实现表单校验功能。

Amis是一个基于React的前端框架,提供了丰富的UI组件以及强大的表单校验功能。

开发者可以通过Amis的表单校验组件,快速实现对表单项的校验,从而提高用户体验和系统安全性。

下面我们将详细介绍Amis的表单校验功能,帮助开发者更好地利用这一功能。

Amis提供了丰富的校验类型,可以轻松应对各种表单校验需求。

比如常见的必填校验、长度校验、邮箱格式校验、手机号格式校验等等。

开发者只需要在表单项的schema配置中指定相应的校验规则,就可以实现对表单项的校验。

对一个输入框进行必填校验,只需要在schema中添加"required: true"即可。

这种简单直观的配置方式,使开发者能够快速实现各种校验需求。

除了基本的校验类型,Amis还提供了自定义校验规则的功能,满足开发者复杂的校验需求。

开发者可以通过validator属性自定义校验规则,传入一个自定义的校验函数,并在函数中实现复杂的校验逻辑。

对一个输入框进行自定义校验规则,只需要在schema中添加"validator"属性,并指定自定义的校验函数即可。

这种灵活的自定义校验规则功能,帮助开发者轻松实现复杂的校验需求。

Amis还提供了校验错误信息的展示功能,帮助用户更直观地了解校验结果。

当用户输入不符合校验规则时,表单项会在下方显示相应的错误提示信息,提示用户输入有误。

开发者可以在schema配置中指定错误信息的展示方式,以及自定义错误信息内容。

JS组件系列——Form表单验证神器:BootstrapValidator

JS组件系列——Form表单验证神器:BootstrapValidator

JS组件系列——Form表单验证神器:BootstrapValidator前⾔:做Web开发的我们,表单验证是再常见不过的需求了。

友好的错误提⽰能增加⽤户体验。

博主搜索bootstrap表单验证,搜到的结果⼤部分都是⽂中的主题:bootstrapvalidator。

今天就来看看它如何使⽤吧。

⼀、源码及API地址介绍它之前,还是给出它的源码以及API的地址吧。

bootstrapvalidator源码:boostrapvalidator api:⼆、代码以及效果展⽰1、初级⽤法来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。

从描述中我们就可以知道它⾄少需要jQuery、bootstrap的⽀持。

我们⾸先引⼊需要的js组件 <script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Content/bootstrap/js/bootstrap.min.js"></script><link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet"/><script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script><link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet"/>我们知道,既然是表单验证,那么我们在cshtml页⾯就必须要有⼀个Form,并且我们知道Form⾥⾯取元素都是通过name属性去取值的,所以,表单⾥⾯的元素都要有⼀个name的属性值。

js常用正则表达式表单验证代码(最全面)

js常用正则表达式表单验证代码(最全面)

js 常用正则表达式表单验证代码方法一:var re=/正则表达式/;re.test($("txtid").val())方法二:$("txtid").val.match(/正则表达式/);附:验证数字的正则表达式集(转载)验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$验证非零的正整数:^\+?[1-9][0-9]*$验证非零的负整数:^\-[1-9][0-9]*$验证非负整数(正整数+ 0)^\d+$验证非正整数(负整数+ 0)^((-\d+)|(0+))$验证长度为3的字符:^.{3}$验证由26个英文字母组成的字符串:^[A-Za-z]+$验证由26个大写英文字母组成的字符串:^[A-Z]+$验证由26个小写英文字母组成的字符串:^[a-z]+$验证由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$验证由数字、26个英文字母或者下划线组成的字符串:^\w+$验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线。

验证是否含有^%&',;=?$\" 等字符:[^%&',;=?$\x22]+验证汉字:^[\u4e00-\u9fa5],{0,}$验证Email地址:^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$验证InternetURL:^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ;^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$验证电话号码:^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$:--正确格式为:XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

,javascript提交验证表单大全目录:1:js 字符串长度限制、判断字符长度、js限制输入、限制不能输入、textarea 长度限制2:js判断汉字、判断是否汉字、只能输入汉字3:js判断是否输入英文、只能输入英文4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字5:只能输入英文字符和数字6:js email验证、js 判断email 、信箱/邮箱格式验证7:js字符过滤,屏蔽关键字8:js密码验证、判断密码: js 不为空、为空或不是对象、判断为空、判断不为空:比较两个表单项的值是否相同:表单只能为数字和"_",:表单项输入数值/长度限定:中文/英文/数字/邮件地址合法性判断:限定表单项不能输入的字符表单的字符控制:form文本域的通用校验函数1. 长度限制<script>function test(){if"不能超过50个字符!");false;}}</script><form name=a onsubmit="return test()"><textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea><input type="submit" name="Submit" value="check"></form>2. 只能是汉字<input onkeyup="value="/oblog/(/[^u4E00-u9FA5]/g,'')">3." 只能是英文<script language=javascript>function onlyEng(){if(!>=65&&<=90))=false;}</script><input onkeydown="onlyEng();">4. 只能是数字<script language=javascript>function onlyNum(){if(!(>=48&&<=57)||>=96&&<=105)))只能是英文字符和数字<input onkeyup="value="/oblog/(/[W]/g,"'') "onbeforepaste="('text',('text').replace(/[^d]/g,''))">6. 验证邮箱格式<SCRIPT LANGUAGE=javascript RUNAT=Server>function isEmail(strEmail) {if (/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/) != -1) return true;elsealert("oh");}</SCRIPT><input type=text onblur=isEmail>7. 屏蔽关键字(这里屏蔽***和****)<script language="">function test() {if( ("***") == 0)|| ("****") == 0)){alert(":)");false;}}</script><form name=a onsubmit="return test()"><input type=text name=b><input type="submit" name="Submit" value="check"></form>8. 两次输入密码是否相同<FORM METHOD=POST ACTION=""><input type="password" id="input1"><input type="password" id="input2"><input type="button" value="test" onclick="check()"></FORM><script>function check(){with{if!={alert("false")= "";= "";}else [0].submit();}}</script>够了吧 :)屏蔽右键很酷oncontextmenu="return false" ondragstart="return false" onselectstart="return false"加在body中二表单项不能为空<script language="javascript"><!--function CheckForm(){if == 0) {alert("请输入您姓名!");false;}return true;}--></script>比较两个表单项的值是否相同<script language="javascript"><!--function CheckForm()if != {alert("您两次输入的密码不一样!请重新输入.");false;}return true;}--></script>表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等<script language="javascript"><!--function isNumber(String){var Letters = ""; 检查一段字符串是否全由数字组成---------------------------------------<script language="Javascript"><!--function checkNum(str){return (/D/)==null}alert(checkNum("41"))alert(checkNum("123214214a1"))怎么判断是否是字符---------------------------------------if (/[^x00-xff]/(s)) alert("含有汉字");else alert("全是字符");3. 怎么判断是否含有汉字---------------------------------------if (escape(str).indexOf("%u")!=-1) alert("含有汉字"); else alert("全是字符");4. 邮箱格式验证---------------------------------------;if (temp > 1) {if ((i-temp) > 3){if ((i-tempd)>0){return 1;}}}return 0;}5. 数字格式验证--------------------------------------- 电话号码格式验证--------------------------------------- 判断输入是否为中文的函数--------------------------------------- function ischinese(s){var ret=true;for(var i=0;i<;i++)ret=ret && (i)>=10000);return ret;}8. 综合的判断用户输入的合法性的函数--------------------------------------- <script language="javascript">判断密码是否输入一致--------------------------------------- function issame(str1,str2){if (str1==str2){return(true);}else{return(false);}}10. 判断用户名是否为数字字母下滑线---------------------------------------function notchinese(str){var reg=/[^A-Za-z0-9_]/gif (str)){return (false);}else{return(true); }}. form文本域的通用校验函数---------------------------------------作用:检测所有必须非空的input文本,比如姓名,账号,邮件地址等等。

该校验现在只针对文本域,如果要针对form里面的其他域对象,可以改变判断条件。

使用方法:在要检测的文本域中加入title文字。

文字是在提示信息,你要提示给用户的该字段的中文名。

比如要检测用户名html如下<input name="txt_1" title="姓名">,当然,最好用可视化工具比如dreamweaver 什么的来编辑域。

相关文档
最新文档