在HTML中使用JSValidate 例子

最新推荐文章于 2021-06-29 11:53:43 发布
最新推荐文章于 2021-06-29 11:53:43 发布
阅读量185 收藏
点赞数
文章标签： HTML 编程 VB JavaScript OS ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/windy_star0909/article/details/83872666
版权

1.html源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-cn">
<title>JavaScript Validation Framework</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript" src="validation-framework.js"></script>
<SCRIPT LANGUAGE="JavaScript" src="site.js"></SCRIPT>
</head>

<body>

<br />

<table cellpadding="10" width="760" cellspacing="0" align="center" class="ContentTable">
<tr>
<td class="Nav" valign="top">
<br />
</td>
<td valign="top">

<script language="JavaScript" src="validation-framework.js"></script>

<div id="error" style="color:red;font-weight:bold"></div>
<form id="form2" name="form2" method="post" action="/webproject2/servlet/survey" οnsubmit="return doValidate(this)">
  <table width="408" border="0">
    <tr>
      <th width="135" align="left" scope="col">姓名:</th>
      <th width="257" align="left" scope="col"><label>
        <input name="name" type="text" id="name" size="20" />
      </label></th>
    </tr>
    <tr>
      <th align="left" scope="row">E_mail地址:</th>
      <td align="left"><input name="email" type="text" id="email" size="40" /></td>
    </tr>
    <tr>
      <th height="26" align="left" scope="row">年龄:      </th>
      <td align="left"><label>
      <input type="radio" name="age" id="radio" value="18" />
      小于18
      <input name="age" type="radio" id="radio2" value="18-40" checked="checked" />
      18-40
      <input type="radio" name="age" id="radio3" value="40" />
      40以上
      </label></td>
    </tr>
    <tr>
      <th align="left" scope="row">编程时间:</th>
      <td align="left"><label>
        <select name="code" id="code">
          <option value="never">不编程</option>
          <option value="6" selected="selected">小于6个月</option>
          <option value="6-12">6个月到12个月</option>
          <option value="12-24">12-24个月</option>
          <option value="24">大于24个月</option>
                                                </select>
      </label></td>
    </tr>
    <tr>
      <th align="left" scope="row">熟悉操作系统:</th>
      <td align="left"><label>
        <select name="os" size="4" multiple="multiple" id="os">
          <option value="WinXP" selected="selected">WinXP</option>
          <option value="Win2000/2003">Win2000/2003</option>
          <option value="Mac OS">Mac OS</option>
          <option value="Linux">Linux</option>
                                                                                </select>
      </label></td>
    </tr>
    <tr>
      <th height="23" align="left" scope="row">编程语言:</th>
      <td align="left"><label>
        <input name="language" type="checkbox" id="language" value="Java" />
        Java
        <input name="language" type="checkbox" id="language" value="C" />
        C
        <input name="language" type="checkbox" id="language" value="C++" />
        C++
        <input name="language" type="checkbox" id="language" value="C#" />
        C#
        <input name="language" type="checkbox" id="language" value="VB" />
      VB</label></td>
    </tr>
    <tr>
      <th align="left" scope="row">建议:</th>
      <td align="left"><label>
        <textarea name="comment" cols="40" rows="5" id="comment"></textarea>
      </label></td>
    </tr>
    <tr>
      <th align="left" scope="row"><label>
        <input type="submit" name="submit" id="submit" value="提交" />
      </label></th>
      <td align="left"><label>
        <input type="reset" name="reset" id="reset" value="重置" />
      </label></td>
    </tr>
    
  </table>
</form>

</body>

</html>

 

2.修改validation-config.xml中的配置文件

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE validation-config SYSTEM "validation-config.dtd">
<validation-config lang="auto">
	<form id="form2" show-error="error" show-type="all">
		<field name="name" display-name="姓名" onfail="">
			<depend name="required" />
			<depend name="commonChar" />
			<depend name="minLength" param0="3"/>
			<depend name="maxLength" param0="20"/>
		</field>
		<field name="email" display-name="email邮箱">
			<depend name="required" />
			<depend name="email" />
		</field>			
		<field name="age" display-name="年纪">
			<depend name="required" />			
		</field>
		<field name="code" display-name="编程时间">
			<depend name="required" />			
		</field>
         <field name="os" display-name="使用的操作系统">
			<depend name="required" />			
		</field>
		<field name="language" display-name="使用的编程语言">
			<depend name="required" />			
		</field>
		<field name="comment" display-name="建议">
			<depend name="required" />			
		</field>
	</form>

</validation-config>

  

 

windy_star0909
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5Validate:基于HTML5新特性新规范的表单验证jQuery插件
06-25
jquery-html5Validate.js 基于HTML5表单验证的jQuery插件。 其他说明 支持type="email", type="number", type="tel", type="url", type="zipcode", 以及多type, 如type="email|tel". 支持 step, min, max, required, pattern, multiple 有4个自定义扩展属性 data-key, data-target, data-min, data-max 测试页面： 更多信息请参考这里： 优势？ 基于HTML5表单规范，无缝承接，UI进化；遵循浏览器验证机制，面向未来，更好的易用性。 许可 MIT许可 捐赠
vue表单验证validate.min.js使用例子，formdata 文件上传表单提交
05-17
总结起来，这个压缩包提供的示例展示了如何在Vue应用中使用`validate.min.js`进行表单验证，使用`FormData`进行文件上传，以及通过`FileReader`获取文件的缩略图。这三个技术结合，可以创建一个完整的用户输入验证和...
html中validate方法,HTML validate分享
weixin_35837047的博客
06-29 1024
HTMLvalidate是指HTML验证。它是通过与标准HTML规则进行比较的方式，分析HTML文档、标记出错误和非标准代码的处理过程。Web页面使用HTML进行渲染，而HTML本身采用了HTML规范作为其规则和标准。通过验证HTML代码穿越多重浏览器标准！1、Web站点访问性：验证HTML代码帮助你找出那些微小的不规范之处，从而防止它们妨碍搜索引擎爬虫或者浏览者。这样使你的站点获得更多的浏览者...
常用的js验证函数 (转载)
amwayy的专栏
11-14 199
//****************************************************************** /**//* *JavaScript Document * タイトル： JS常用処理函数 * 説明： JS常用処理函数 * 著作権： Copyright (c) 2007-4-30 * 会社： 杭州恒生電子株式会社 * @担当者： 林顔双 * @...
jQuery html5Validate基于HTML5表单验证插件
weixin_30398227的博客
10-10 410
一、前言 前3篇文章实际都是为本文做铺垫的，如果以下棋表示，前三篇是普通走棋，本篇是将军！ 目前市面上有不少表单验证插件，看似强大，实在糟糕！ 总结下，有以下一些问题： 过多干预包括：改变了表单元素UI, 为表单元素绑定过多事件等 布局等限制包括：需要特定结构的布局，需要特定的类名或者ID 学习成本包括：N多元作者自定义的属性，或者自定义的特定的数据结构 可用性 当JS...
在html5 中怎么简单的编程，来校验（validate）form中的内容
一个烂人的随手笔记
05-13 1879
在form中 用onsubmit调用javascript 方法来取代 传统的 button 的 onClick方法
bootstrap使用validate实现简单校验功能
09-01
在这个例子中，Bootstrap的样式和布局对表单验证没有直接影响，但它们为页面提供了一致的设计风格。 3. **HTML 结构**：表单元素需要遵循一定的HTML结构，以便于Bootstrap和jQuery Validate正确识别和处理。例如，`...
Vue中使用vee-validate表单验证的方法
08-27
在模板中使用自定义规则： ```html <input type="text" name="idCard" v-model="idCard" v-validate="'idCard'" placeholder="请输入身份证号"> ('idCard')">身份证号无效 ``` 如果希望在验证失败时改变输入框的...
jquery插件validate验证的小例子
12-04
在这个小例子中，我们将深入探讨如何使用validate插件来实现表单验证。 首先，为了使用jQuery validate插件，我们需要在HTML文档中引入必要的库。在提供的代码片段中，我们看到有以下三段脚本引用： 1. `...
html中表单的校验的插件,功能强大的jquery.validate表单验证插件
weixin_39908985的博客
06-10 513
本文实例为大家分享了jquery.validate表单验证的使用方法，供大家参考，具体内容如下1 、表单验证的准备工作在开启长篇大论之前，首先将表单验证的效果展示给大家。1.点击表单项，显示帮助提示2.鼠标离开表单项时，开始校验元素3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒对于初学者而言，html表单验证是一项极其琐碎的事情。要做好表单验证，需要准备以下基本要素：1).html表单结构：...
validate:使用JavaScript编写HTML数据属性来验证表单的简便方法
05-18
Validate.js-快速方法 这是使用JavaScript编写HTML数据属性来验证表单的简便方法的示例。 此代码使用 ， ， 和。 它还具有Internet Explorer的占位符备用。 如所示，此代码可用作RequireJS模块。 要求 这些是您的应用程序的基本要求： Git bower v1.3+ node v0.10+ 注意：JS依赖项（如RequireJS和jQuery）将与bower一起安装。 安装并运行 从github克隆源代码： git clone https://github.com/marcelonaegeler/validate.git 去validate ： cd validate 通过bower下载依赖项： bower install 安装节点http-server： npm i http-server -g 启动节点服务器：
jQuery html5Validate表单验证插件
01-04
html5Validate支持HTML5验证相关的东西，如type="email", type="number", type="tel", type="url", step, min, max, required, pattern, multiple等，并有一些本地化扩展，如增加了type="zipcode"邮编等，支持type="hidden"的完整验证（HTML5中是忽略的），支持多type共存，例如type="email|tel", 可以让文本框输入邮箱或者手机号码,下载的朋友请保留插件原作者的信息。
html5Validate表单验证插件
一只蠢村花的博客
08-16 1763
张鑫旭博客： https://www.zhangxinxu.com/wordpress/2012/12/jquery-html5validate-html5-form-validate-plugin/ 使用方法 使用方法: var flag = $.html5Validate.isAllpass($("#addRoleForm")); if(!flag){ return; }...
html-JQ的validate插件表单验证
whatname123的博客
11-30 113
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get" > 姓名： <input type="text" id="aaa" name="username" placeholder="请输入姓名" /
validate.js 表单校验插件
草木红的博客
12-09 3681
菜鸟教程： https://www.runoob.com/jquery/jquery-plugin-validate.html (一) 使用步骤 导入jquery.js，validate基于jquery 导入validate.js 页面加载成功后，对表单进行校验，$(“选择器”).validate(); <form action="" id="login"> 必填： <input type="text" name="userName" id=""><br /
html 5 表单校验插件,前端校验插件——Validator简单使用
weixin_39823459的博客
06-20 415
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>欢迎转载，转载请注明出处-VirgoArt，www.cnblogs.com1.引用jquery-1.9.1.min.js与jquery.validate.min...
html5validate ajax提交,jquery插件-Validation，Ajax全接触
weixin_42097967的博客
06-11 188
jquery插件-Validation1、基本验证方法【required必填，remote远程效验，minlength最小长度，maxlength最大长度，rangelength长度范围，min最小值，max最大值，range值范围，email Email格式，url URL格式，date 日期，dateISO ISO日期(只能是年月日)，number 数字，digits整数，equalTo与另一...
asp.netjs手机验证例子
最新发布
06-07
好的，这里提供一个简单的例子，帮助您实现asp.net中的手机验证： 1. 在aspx页面的头部引入以下js文件： ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.2/jquery.validate.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.2/additional-methods.min.js"></script> ``` 2. 在表单中添加一个文本框，并使用MaskedEdit控件对其进行格式化，并设置电话号码的格式。 ```html <asp:TextBox ID="txtPhone" runat="server"></asp:TextBox> <ajaxToolkit:MaskedEditExtender ID="maskPhone" runat="server" TargetControlID="txtPhone" Mask="(999) 999-9999" MaskType="Number" InputDirection="LeftToRight" ClearMaskOnLostFocus="false" /> <ajaxToolkit:MaskedEditValidator ID="valPhone" runat="server" ControlToValidate="txtPhone" ValidationExpression="\(\d{3}\) \d{3}\-\d{4}" IsValidEmpty="false" InvalidValueMessage="Invalid Phone Number!" /> ``` 3. 使用jQuery Validate插件来对文本框进行验证，并添加一个自定义规则来验证电话号码。 ```javascript $(document).ready(function () { $("#form1").validate({ rules: { <%=txtPhone.UniqueID%>: { required: true, phoneUS: true } }, messages: { <%=txtPhone.UniqueID%>: { required: "Please enter your phone number.", phoneUS: "Please enter a valid US phone number." } } }); $.validator.addMethod("phoneUS", function (phone_number, element) { phone_number = phone_number.replace(/\s+/g, ""); return this.optional(element) || phone_number.length > 9 && phone_number.match(/^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/); }, "Please specify a valid phone number"); }); ``` 4. 最后，在aspx页面中添加一个提交按钮，并使用C#代码来处理表单提交。 ```html <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /> ``` ```csharp protected void btnSubmit_Click(object sender, EventArgs e) { if (Page.IsValid) { // 处理表单提交 string phone = txtPhone.Text; // ... } } ``` 希望这个例子可以帮助您实现asp.net中的手机验证！如果您有任何其他问题，请随时与我联系。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值