本文介绍了如何使用HTML5的新特性进行表单验证，包括必填字段、正则表达式匹配和自定义验证方法。通过示例展示了如何创建用户友好的表单，并强调了在服务器端检查数据的重要性。
Data Validation with HTML5. Today I will tell about data validation again. HTML5 specification bring us many interesting, and one of useful function is browser-based form validation. Of course, not all browsers support HTML5 (even IE9 not support it yet), but as example Firefox 4 started support it. And this is great, it can mean that shortly many of existed members of Firefox will update its browsers and will have HTML5 support. Of course, we always can use Javascript to validate our fields (even jQuery libraries), but what if in coming future we even don`t will worry about it at all? What if most of work will execute our web browser? Future coming today.
使用HTML5进行数据验证。 今天，我将再次介绍数据验证。 HTML5规范给我们带来了许多有趣的东西，其中有用的功能之一是基于浏览器的表单验证。 当然，并非所有浏览器都支持HTML5(甚至IE9还不支持HTML5)，但是例如Firefox 4开始支持它。 这很棒，这意味着Firefox的许多现有成员将在短期内更新其浏览器并支持HTML5。 当然，我们总是可以使用Javascript来验证我们的字段(甚至是jQuery库)，但是如果在未来的将来我们甚至不担心它，该怎么办？ 如果大多数工作将执行我们的Web浏览器怎么办？ 未来即将到来。
Here are our sample and downloadable package:
这是我们的示例和可下载的软件包：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML (Step 1. HTML)
This is our main source file with our form. I decided to create some ‘Join form’ to website using HTML5:
这是我们表单的主要源文件。 我决定使用HTML5为网站创建一些“加入表单”：
index.html (index.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">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div class="example">
<form action="#" method="post" enctype="multipart/form-data">
<fieldset>
<legend>General Info</legend>
<div class="required">
<label for="username">Username:</label>
<input type="text" required x-moz-errormessage="Enter Username" name="username" id="username" class="inputText" size="10" maxlength="128" value="" />
</div>
<div class="required">
<label for="first_name">First Name:</label>
<input type="text" required x-moz-errormessage="Enter First Name" name="first_name" id="first_name" class="inputText" size="10" maxlength="128" value="" />
</div>
<div class="required">
<label for="last_name">Last Name:</label>
<input type="text" required x-moz-errormessage="Enter Second Name" name="last_name" id="last_name" class="inputText" size="10" maxlength="128" value="" />
</div>
<div class="required">
<label for="password">Password</label><input type='password' id='p1'><br /><br />
<label for="password">Confirm Password</label><input type='password' onfocus="validatePass(document.getElementById('p1'), this);" oninput="validatePass(document.getElementById('p1'), this);">
</div>
<div class="required">
<label for="email">Email:</label>
<input type='email' required pattern=".*@gmail\.com" x-moz-errormessage="Enter your email (gmail.com)" name="email" id="email" class="inputText" size="10" maxlength="128" value="" />
</div>
</fieldset>
<fieldset>
<legend>Miscellaneous Info</legend>
<div class="required">
<label for="profile_type">Select</label>
<select required x-moz-errormessage="Select Your Profile Type" name="profile_type" id="profile_type" size="1">
<option value=""></option>
<option value="single">Single</option>
<option value="couple">Couple</option>
</select>
</div>
<div class="optional">
<label for="sex">Sex:</label>
<input type="radio" required x-moz-errormessage="Select Your Sex" name="sex" id="sex" value="male" /> Male
<input type="radio" required x-moz-errormessage="Select Your Sex" name="sex" id="sex" value="female" /> Female
</div>
<div class="optional">
<label for="phone">Phone:</label>
<input type="tel" required pattern='\d\d\d \d\d\d \d\d\d\d\d\d' x-moz-errormessage="Enter your Phone number in format 'xxx xxx xxxxxx'" class="inputText" size="10" maxlength="50" value="" />
</div>
<div class="optional">
<label for="url">Website:</label>
<input type="url" required x-moz-errormessage="Enter Your Website URL starting with http://" class="inputText" size="10" maxlength="128" value="" />
</div>
<div class="required">
<label for="description">Description:</label>
<textarea required name="description" id="description" class="inputTextarea" rows="3" cols="51"></textarea>
</div>
<div class="optional">
<label for="image">Upload photo:</label>
<input type="file" required x-moz-errormessage="Select image file" name="image" id="image" class="inputFile" />
</div>
<div class="optional">
<label for="agreement">Subscription:</label>
<input type="checkbox" name="subscribe" id="subscribe" value="yes" /> Subscribe to our news
</div>
<div class="required">
<label for="agreement">Agreement:</label>
<input type="checkbox" required x-moz-errormessage="Need Check It" name="agreement" id="agreement" value="yes" /> I have read and agreed with Terms of Use.
</div>
</fieldset>
<fieldset>
<div class="submit">
<div>
<input type="submit" class="inputSubmit" value="Join Now" />
</div>
</div>
</fieldset>
</form>
<div style="clear:both"></div>
</div>
<!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">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div class="example">
<form action="#" method="post" enctype="multipart/form-data">
<fieldset>
<legend>General Info</legend>
<div class="required">
<label for="username">Username:</label>
<input type="text" required x-moz-errormessage="Enter Username" name="username" id="username" class="inputText" size="10" maxlength="128" value="" />
</div>
<div class="required">
<label for="first_name">First Name:</label>
<input type="text" required x-moz-errormessage="Enter First Name" name="first_name" id="first_name" class="inputText" size="10" maxlength="128" value="" />
</div>
<div class="required">
<label for="last_name">Last Name:</label>
<input type="text" required x-moz-errormessage="Enter Second Name" name="last_name" id="last_name" class="inputText" size="10" maxlength="128" value="" />
</div>
<div class="required">
<label for="password">Password</label><input type='password' id='p1'><br /><br />
<label for="password">Confirm Password</label><input type='password' onfocus="validatePass(document.getElementById('p1'), this);" oninput="validatePass(document.getElementById('p1'), this);">
</div>
<div class="required">
<label for="email">Email:</label>
<input type='email' required pattern=".*@gmail\.com" x-moz-errormessage="Enter your email (gmail.com)" name="email" id="email" class="inputText" size="10" maxlength="128" value="" />
</div>
</fieldset>
<fieldset>
<legend>Miscellaneous Info</legend>
<div class="required">
<label for="profile_type">Select</label>
<select required x-moz-errormessage="Select Your Profile Type" name="profile_type" id="profile_type" size="1">
<option value=""></option>
<option value="single">Single</option>
<option value="couple">Couple</option>
</select>
</div>
<div class="optional">
<label for="sex">Sex:</label>
<input type="radio" required x-moz-errormessage="Select Your Sex" name="sex" id="sex" value="male" /> Male
<input type="radio" required x-moz-errormessage="Select Your Sex" name="sex" id="sex" value="female" /> Female
</div>
<div class="optional">
<label for="phone">Phone:</label>
<input type="tel" required pattern='\d\d\d \d\d\d \d\d\d\d\d\d' x-moz-errormessage="Enter your Phone number in format 'xxx xxx xxxxxx'" class="inputText" size="10" maxlength="50" value="" />
</div>
<div class="optional">
<label for="url">Website:</label>
<input type="url" required x-moz-errormessage="Enter Your Website URL starting with http://" class="inputText" size="10" maxlength="128" value="" />
</div>
<div class="required">
<label for="description">Description:</label>
<textarea required name="description" id="description" class="inputTextarea" rows="3" cols="51"></textarea>
</div>
<div class="optional">
<label for="image">Upload photo:</label>
<input type="file" required x-moz-errormessage="Select image file" name="image" id="image" class="inputFile" />
</div>
<div class="optional">
<label for="agreement">Subscription:</label>
<input type="checkbox" name="subscribe" id="subscribe" value="yes" /> Subscribe to our news
</div>
<div class="required">
<label for="agreement">Agreement:</label>
<input type="checkbox" required x-moz-errormessage="Need Check It" name="agreement" id="agreement" value="yes" /> I have read and agreed with Terms of Use.
</div>
</fieldset>
<fieldset>
<div class="submit">
<div>
<input type="submit" class="inputSubmit" value="Join Now" />
</div>
</div>
</fieldset>
</form>
<div style="clear:both"></div>
</div>
Here are important notes. HTML5 using several new attributes as rules for validation of form fields. This is:
这里是重要的注意事项。 HTML5使用几个新属性作为验证表单字段的规则。 这是：
required – this attribute will transform field into required field. This attribute applicable to different form elements (input, select, textarea etc). So if we will mark our field with this attribute, it will mean that we will need to check our checkbox field, type value for text field, select value from selector etc.
必填 –此属性会将字段转换为必填字段。 此属性适用于不同的表单元素(输入，选择，文本区域等)。 因此，如果我们用此属性标记字段，则意味着我们需要检查复选框字段，为文本字段键入值，从选择器中选择值等。
pattern – this attribute will determinate regular expression which will using for checking values of elements. In our example I will use this attribute to set custom pattern for email and phone fields.
模式 -此属性将确定用于检查元素值的正则表达式。 在我们的示例中，我将使用此属性为电子邮件和电话字段设置自定义模式。
maxlength – we can use this attribute to set max limit of symbols for field.
maxlength –我们可以使用此属性来设置字段符号的最大限制。
步骤2. CSS (Step 2. CSS)
All styles here:
这里的所有样式：
css / main.css (css/main.css)
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:700px;font-size:80%;border:1px #000 solid;margin:10px auto;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px}
form{font-size:100%;min-width:560px;max-width:620px;width:590px;margin:0 auto;padding:0}
form fieldset{clear:both;font-size:100%;border-color:#000;border-style:solid none none;border-width:1px 0 0;margin:0;padding:10px}
form fieldset legend{font-size:150%;font-weight:400;color:#000;margin:0;padding:0 5px}
label{font-size:100%}
label u{font-style:normal;text-decoration:underline}
input,select,textarea{font-family:Tahoma, Arial, sans-serif;font-size:100%;color:#000}
textarea{overflow:auto}
form div{clear:left;display:block;width:354px;zoom:1;margin:10px 0 0;padding:1px 3px}
form div fieldset{clear:none;width:197px;border-color:#666;border-style:solid;border-width:1px;margin:0 0 0 144px;padding:0 5px 5px}
form div fieldset legend{font-size:100%;padding:0 3px 0 9px}
form div label{display:block;float:left;width:130px;text-align:right;margin:0 0 5px;padding:3px 5px}
form div.optional label,label.optional{font-weight:400}
form div img{float:left;border:1px solid #000;margin:0 0 5px}
form div input.inputFile{width:211px}
form div.submit{width:214px;padding:0 0 0 146px}
form div.submit div{display:inline;float:left;text-align:left;width:auto;margin:0;padding:0}
form div.required fieldset legend,form div.required label,label.required{font-weight:700}
form div select,form div textarea,form div input.inputText,form div input.inputPassword{width:200px;margin:0;padding:1px 3px}
:valid {box-shadow: 0 0 5px green}
:-moz-submit-invalid {box-shadow: 0 0 5px pink}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:700px;font-size:80%;border:1px #000 solid;margin:10px auto;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px}
form{font-size:100%;min-width:560px;max-width:620px;width:590px;margin:0 auto;padding:0}
form fieldset{clear:both;font-size:100%;border-color:#000;border-style:solid none none;border-width:1px 0 0;margin:0;padding:10px}
form fieldset legend{font-size:150%;font-weight:400;color:#000;margin:0;padding:0 5px}
label{font-size:100%}
label u{font-style:normal;text-decoration:underline}
input,select,textarea{font-family:Tahoma, Arial, sans-serif;font-size:100%;color:#000}
textarea{overflow:auto}
form div{clear:left;display:block;width:354px;zoom:1;margin:10px 0 0;padding:1px 3px}
form div fieldset{clear:none;width:197px;border-color:#666;border-style:solid;border-width:1px;margin:0 0 0 144px;padding:0 5px 5px}
form div fieldset legend{font-size:100%;padding:0 3px 0 9px}
form div label{display:block;float:left;width:130px;text-align:right;margin:0 0 5px;padding:3px 5px}
form div.optional label,label.optional{font-weight:400}
form div img{float:left;border:1px solid #000;margin:0 0 5px}
form div input.inputFile{width:211px}
form div.submit{width:214px;padding:0 0 0 146px}
form div.submit div{display:inline;float:left;text-align:left;width:auto;margin:0;padding:0}
form div.required fieldset legend,form div.required label,label.required{font-weight:700}
form div select,form div textarea,form div input.inputText,form div input.inputPassword{width:200px;margin:0;padding:1px 3px}
:valid {box-shadow: 0 0 5px green}
:-moz-submit-invalid {box-shadow: 0 0 5px pink}
News: CSS3 UI represents us new pseudo-classes (uses in HTML5), as example :invalid, :valid, :required and : optional. Firefox 4 support all these pseudo-classes and add own new pseudo-class :-moz-submit-invalid. This class applied to the button ‘submit’ when form contain any invalid elements.
新闻：CSS3 UI为我们提供了新的伪类(在HTML5中使用)，例如：invalid，：valid，：required和：optional。 Firefox 4支持所有这些伪类，并添加自己的新伪类：-moz-submit-invalid。 当表单包含任何无效元素时，将此类应用于按钮“提交”。
步骤3. JS (Step 3. JS)
We will using one easy function for password validation in this file
我们将在此文件中使用一个简单的功能来进行密码验证
js / main.js (js/main.js)
function validatePass(p1, p2) {
if (p1.value != p2.value || p1.value == '' || p2.value == '') {
p2.setCustomValidity('Password incorrect');
} else {
p2.setCustomValidity('');
}
}
function validatePass(p1, p2) {
if (p1.value != p2.value || p1.value == '' || p2.value == '') {
p2.setCustomValidity('Password incorrect');
} else {
p2.setCustomValidity('');
}
}
Using custom JS we can apply own validation methods for custom elements. As example – we will using this to validate of password field (second field – confirm password field). So, we can mark element is invalid using setCustomValidity method. As first param – it accept text (error message). Just check this function ‘validatePass’ to understand what it doing.
使用自定义JS，我们可以对自定义元素应用自己的验证方法。 例如–我们将使用它来验证密码字段(第二个字段–确认密码字段)。 因此，我们可以使用setCustomValidity方法将元素标记为无效。 作为第一个参数–接受文本(错误消息)。 只需检查此函数“ validatePass”即可了解其功能。
现场演示
结论 (Conclusion)
Very hope that HTML5 will supported by most of browsers soon. Just because it will give us possibility to make really user friendly forms. But anyway, even if this will allow us to validate data, never forgot to check received data at server side before working (especially before inserting to database). Never trust all incoming data – it will protect you from any unexpected cases. Good luck!
非常希望HTML5很快能被大多数浏览器支持。 仅仅因为这将使我们有可能制作出真正用户友好的表格。 但是无论如何，即使这允许我们验证数据，也永远不要忘记在工作之前(尤其是在插入数据库之前)在服务器端检查接收到的数据。 永远不要相信所有传入的数据–它可以保护您免受意外情况的影响。 祝好运！
翻译自: https://www.script-tutorials.com/data-validation-html5/
扫一扫
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
