表单验证 input验证 email验证-freejs.net代码演示

首页>>表单>>表单验证 input验证 email验证(2014-02-09)

表单验证 input验证 email验证

XML/HTML Code

<div class="senp-grid">
<div class="cl-aureal-66">
<label for="test">Email test</label>
<input class="test" name="email" />
<label for="test">只能输入字母</label>
<input class="test" name="only_digits" />
<label for="test">只能输入数字</label>
<input class="test" name="only_numbers" />
<label for="test">2位小数</label>
<input class="test" name="dotted_decimals" />
<label for="test">Comma decimals test</label>
<input class="test" name="comma_decimals" />
<label for="test">Custom (it will check if it's longer than 3 digits or numbers)</label>
<input class="test" name="custom_function" />
<input type="submit" value="test" />
</div>
<div class="cl-aureal-33" id="result"></div>
<div class="clean"></div>
</div>

JavaScript Code

<script>
( function( $ ) {
$( function(){
$.senpValidate('newRegexp', 'custom_test', /test/ );
$.senpValidate('newPlugin', 'hello world', function(instances){
var message = 'hello world! running the instance {n} of senpValidate'.replace(/{n}/, instances.core.instanceId );
console.log( message );
});
$('input[type=submit]').senpValidate({
click: function (notValids) {
var target = $('#result');
target.empty();
$( notValids ).each( function(){
target.html( target.html() + this.name + ' is not valid!<br/>' );
});
},
tooltipWidth: 300,
items: [{
errorMessage: {
title: 'Ooops maybe this email is wrong!',
text: 'A correct email address could be info@mymail.com'
},
selector: 'input[name=email]',
validate: 'email'
},{
errorMessage: 'this is not valid! :O',
selector: 'input[name=only_digits]',
validate: 'only digits'
},{
errorMessage: 'this is not valid! :O',
selector: 'input[name=only_numbers]',
validate: 'only numbers'
},{
errorMessage: 'this is not valid! :O',
selector: 'input[name=dotted_decimals]',
validate: 'dotted decimals'
},{
errorMessage: 'this is not valid! :O',
selector: 'input[name=comma_decimals]',
validate: 'comma decimals'
},{
errorMessage: 'this is not valid! :O',
selector: 'input[name=custom_function]',
validate: function( value ) {
return ( value.replace( /s+/g, '' ).length ) ? true : false ;
}
}]
});
});
})( jQuery );
</script>