smartform/index.html at master · lancevo/smartform · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <title>smartform demo</title>


</head>
<body>

<p>
* To open in a full window, click on Edit in JSFiddle on each example.
<br>
Source: <a href="https://github.com/lancevo/smartform" target="_blank">https://github.com/lancevo/smartform</a>
</p>


<h2>required</h2>
<iframe width="100%" height="300" src="http://jsfiddle.net/lvo811/k4H5N/embedded/result,html,js,css,resources/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

<h2>.focus & .visited</h2>
<iframe width="100%" height="300" src="http://jsfiddle.net/lvo811/DEBLF/embedded/result,html,js,css,resources/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

<h2>patterns</h2>
<iframe width="100%" height="300" src="http://jsfiddle.net/lvo811/3gZN2/embedded/result,html,js,css,resources/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
useful pattern: <br>
<ul>
    <li>alphabet uppercase: ^[A-Z]+$</li>
    <li>alphabet lowercase: ^[a-z]+$</li>
    <li>numbers : ^[\d]+$</li>
    <li>alphanumeric and space: ^[A-z\d\s]+$</li>
    <li>email: ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$</li>
</ul>
<h2>match the value of other input field</h2>
<iframe width="100%" height="300" src="http://jsfiddle.net/lvo811/2M45P/embedded/result,html,js,css,resources/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

<h2>password strength meter</h2>
<iframe width="100%" height="300" src="http://jsfiddle.net/lvo811/8nUsb/embedded/result,html,js,css,resources/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>


</body>
</html>