1页面 index.jsp
<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
<html>
<head>
<title>formvalidator.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="formValidator/css/validationEngine.jquery.css" type="text/css" />
<link rel="stylesheet" href="formValidator/css/template.css" type="text/css" />
<script src="formValidator/jquery.js" type="text/javascript"></script>
<script src="formValidator/js/jquery.validationEngine-cn.js" type="text/javascript"></script>
<script src="formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#formID").validationEngine({
validationEventTriggers:"blur", //触发的事件 validationEventTriggers:"keyup blur",
inlineValidation: true,//是否即时验证，false为提交表单时验证,默认true
success : false,//为true时即使有不符合的也提交表单,false表示只有全部通过验证了才能提交表单,默认false
promptPosition: "topRight",//提示所在的位置，topLeft, topRight, bottomLeft, centerRight, bottomRight
//failure : function() { alert("验证失败，请检查。"); }//验证失败时调用的函数
//success : function() { callSuccessFunction() },//验证通过时调用的函数
});
});
</script>
</head>
<body>
<form id="formID" class="formular" method="post" action="">
<fieldset>
<legend>User informations</legend>
<label>
<span>Desired username (ajax validation, only karnius is available) : </span>
<input value="" class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]" type="text" name="user" id="user" />
</label>
<label>
<span>First name (optional)</span>
<input value="karnius" class="validate[optional,custom[onlyLetter],length[0,100]] text-input" type="text" name="firstname" id="firstname" />
</label>
<label>
<span>Last name : </span>
<input value="karnius" class="validate[required,custom[onlyLetter],length[0,100]] text-input" type="text" id="data[Use6][preferedColor]" name="lastname" />
</label>
<div>
<span>Radio Groupe : <br /></span>
<span>radio 1: </span>
<input class="validate[required] radio" type="radio" name="data[User][preferedColor]" id="radio1" value="5">
<span>radio 2: </span>
<input class="validate[required] radio" type="radio" name="data[User][preferedColor]" id="radio2" value="3"/>
<span>radio 3: </span>
<input class="validate[required] radio" type="radio" name="data[User][preferedColor]" id="radio3" value="9"/>
</div>
<div>
<span>Minimum 2 checkbox : <br /></span>
<input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="data[User3][preferedColor]" value="5">
<input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="data[User3][preferedColor]" value="5">
<input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="maxcheck2" value="3"/>
<input class="validate[minCheckbox[2],maxCheckbox[3]] checkbox" type="checkbox" name="data[User3][preferedColor]" id="maxcheck3" value="9"/>
</div>
<label>
<span>Date : (format YYYY-MM-DD)</span>
<input value="1111-11-11" class="validate[required,custom[date]] text-input" type="text" name="date" id="date" />
</label>
<label>
<span>Favorite sport 1:</span>
<select name="sport" id="sport" class="validate[required]" id="sport" >
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<label>
<span>Favorite sport 2:</span>
<select name="sport2" id="sport2" multiple class="validate[required]" id="sport2" >
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<label>
<span>Age : </span>
<input value="22" class="validate[required,custom[onlyNumber],length[0,3]] text-input" type="text" name="age" id="age" />
</label>
<label>
<span>Telephone : </span>
<input value="1111111" class="validate[required,custom[telephone]] text-input" type="text" name="telephone" id="telephone" />
</label>
<label>
<span>mobilephone : </span>
<input value="111111" class="validate[required,custom[mobilephone]] text-input" type="text" name="telphone" id="telphone" />
</label>
<label>
<span>chinese : </span>
<input value="asdf" class="validate[required,custom[chinese]] text-input" type="text" name="chinese" id="chinese" />
</label>
<label>
<span>url : </span>
<input value="url" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" />
</label>
<label>
<span>zipcode : </span>
<input value="zipcode" class="validate[required,custom[zipcode]] text-input" type="text" name="zipcode" id="zipcode" />
</label>
<label>
<span>ip : </span>
<input value="ip" class="validate[required,custom[ip]] text-input" type="text" name="ip" id="ip" />
</label>
<label>
<span>qq : </span>
<input value="01234" class="validate[required,custom[ip]] text-input" type="text" name="qq" id="qq" />
</label>
</fieldset>
<fieldset>
<legend>Password</legend>
<label>
<span>Password : </span>
<input value="karnius" class="validate[required,length[6,11]] text-input" type="password" name="password" id="password" />
</label>
<label>
<span>Confirm password : </span>
<input value="karnius" class="validate[required,confirm[password]] text-input" type="password" name="password2" id="password2" />
</label>
</fieldset>
<fieldset>
<legend>Email</legend>
<label>
<span>Email address : </span>
<input value="ced@hotmail.com" class="validate[required,custom[email]] text-input" type="text" name="email" id="email" />
</label>
<label>
<span>Confirm email address : </span>
<input value="ced@hotmail.com" class="validate[required,confirm[email]] text-input" type="text" name="email2" id="email2" />
</label>
</fieldset>
<fieldset>
<legend>Comments</legend>
<label>
<span>Comments : </span>
<textarea value="ced@hotmail.com" class="validate[required,length[6,300]] text-input" name="comments" id="comments" /> </textarea>
</label>
</fieldset>
<fieldset>
<legend>Conditions</legend>
<div class="infos">Checking this box indicates that you accept terms of use. If you do not accept these terms, do not use this website : </div>
<label>
<span class="checkbox">I accept terms of use : </span>
<input class="validate[required] checkbox" type="checkbox" id="agree" name="agree"/>
</label>
</fieldset>
<input class="submit" type="submit" value="Validate & Send the form!"/>
<hr/>
</form>
</body>
</html>
2效果如下：
- 大小: 57.2 KB
分享到：
相关推荐
网页模板中的jQuery实现企业开户资质表单验证及图片上传特效是一项关键的技术应用，它涉及到前端交互设计、数据验证以及文件处理等多个方面的知识。在构建一个高效、用户友好的企业开户流程时，这样的功能是必不可少...
- **多文件上传**：ASP.NET默认只支持单文件上传，但可以通过使用多个`FileUpload`控件或者使用第三方库（如jQuery File Upload）实现多文件上传。 - **文件类型限制**：使用`Accept`属性可以限制用户只能选择特定...
传统的ASP.NET控件如FileUpload提供了方便的图片上传功能，但有时我们可能需要自定义更复杂或更灵活的上传机制，不依赖于内置的控件。本篇文章将详细探讨如何在ASP.NET中实现图片上传，不通过ASP.NET控件。 首先，...
1. **表单与控件**： ASP.NET提供了多种控件用于文件上传，最常见的是`<asp:FileUpload>`控件。在批量上传的场景下，通常需要创建多个这样的控件，或者使用HTML5的`<input type="file" multiple />`属性，允许用户...
3. 控件：在ASP.NET Web Forms中，有各种内置的服务器控件，如FileUpload控件，用于用户选择文件进行上传；以及HyperLink或Button控件，用于触发文件下载操作。 4. HTTP上下文：ASP.NET中的HttpContext对象提供了...
我们需要验证文件类型、大小是否符合规定，然后保存到服务器的指定目录。 3. **文件存储策略**：图片保存在服务器上需要考虑存储路径、文件命名规则以及安全性。通常会生成随机文件名以防止重名，同时确保非授权...
在这个案例中，`wucMultiFileUpload`就是一个用户控件，它封装了多文件上传的逻辑，包括文件选择、验证、上传和展示。 6. **数据结构**： - 控件内部可能使用自定义的DataSet，如`ImagesData`，来存储上传文件的...
在上传文件之前，应进行验证，例如检查文件类型、大小、是否存在病毒等，以确保安全。例如，限制上传文件的大小，避免DoS攻击： ```csharp if (file.ContentLength > 1024 * 1024) // 1MB限制 { // 提示文件过大 ...
此外，为了提高用户体验，可以使用专门的大文件上传控件，如Plupload、jQuery File Upload等，它们提供了断点续传、进度条显示等功能。 总结，实现Java批量上传文件实例需要前端提供多选文件的界面，后端利用如...
1. 创建HTML表单，包含文件选择控件和上传按钮，使用JavaScript或jQuery处理提交事件。 2. 使用ASP接收表单数据，读取上传的文件。 3. 检查文件类型和大小，如果符合条件，生成新文件名并保存到服务器指定的目录。 4...
此外，HTML5的表单控件和formdata对象使得在发送表单数据到服务器时可以包含文件，这在文件上传场景中非常实用。 在实际部署过程中，你需要一个服务器环境来运行PHP代码，这里推荐使用XAMPP。XAMPP是一个包含Apache...
6. **文件命名和重名处理**：为避免文件重名，可以生成唯一的文件名，如结合时间戳和随机数。同时，考虑使用文件名哈希值来提高查询效率。 7. **权限控制**：根据用户角色或权限设置不同的上传权限，例如管理员可以...
可能需要考虑的有文件重名、覆盖提示以及错误处理。 4. **页面设置**：页面设置通常允许用户自定义打印时的布局，如页边距、纸张大小等。这需要一个用户界面来收集这些设置，然后通过CSS样式或服务器端的打印指令来...
这里假设有一个名为mf的对象，它的MF_Path属性用于存储文件路径，并且有一个addnum变量表示数据库操作是否成功。如果添加到数据库成功，会显示“上传成功”的提示；否则，显示“上传失败”。 此外，代码还检查了...
JavaScript是实现动态交互的关键，可能在这个项目中，开发者会使用JavaScript或其库（如jQuery）来处理用户交互，如点击切换城市、滑动显示未来几天的天气等。另外，考虑到天气数据的实时性，可能还会有AJAX异步请求...