jquery html5注册表单验证提示信息带步骤的注册表单代码



196 781 261



特效描述:注册表单验证 提示信息 带步骤注册表单,jquery+html5注册页面

代码结构

1. 引入CSS

<link href="css/normalize.css" rel="stylesheet"/>
<link href="css/jquery-ui.css" rel="stylesheet"/>
<link href="css/jquery.idealforms.min.css" rel="stylesheet" media="screen"/>

2. 引入JS

<script src="js/html5shiv.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.idealforms.js"></script>

3. HTML代码

<div class="row">
  <div class="eightcol last">
    <!-- Begin Form -->
    <form id="my-form">
        <section name="第一步">
          <div><label>用户名:</label><input id="username" name="username" type="text"/></div>
          <div><label>密码:</label><input id="pass" name="password" type="password"/></div>
          <div><label>邮箱:</label><input id="email" name="email" data-ideal="required email" type="email"/></div>
          <div><label>出生日期:</label><input name="date" class="datepicker" data-ideal="date" type="text" placeholder="月/日/年"/></div>
          <div><label>上传头像:</label><input id="file" name="file" multiple type="file"/></div>
          <div><label>个人主页:</label><input name="website" data-ideal="url" type="text"/></div>
        </section>
        <section name="第二步">
          <div id="languages">
            <label>语言:</label>
            <label><input type="checkbox" name="langs[]" value="English"/>英文</label>
            <label><input type="checkbox" name="langs[]" value="Chinese"/>中文</label>
            <label><input type="checkbox" name="langs[]" value="Spanish"/>西班牙文</label>
            <label><input type="checkbox" name="langs[]" value="French"/>法文</label>
          </div>
          <div><label>精通几门:</label>
            <label><input type="radio" name="radio" checked/>1</label>
            <label><input type="radio" name="radio"/>2</label>
            <label><input type="radio" name="radio"/>3</label>
            <label><input type="radio" name="radio"/>4</label>
          </div>
        </section>
        <section name="第三步">
          <div><label>电话:</label><input type="tel" name="phone" data-ideal="phone"/></div>
          <div><label>国籍:</label>
          <select id="states" name="states">
            <option value="default">&ndash; 选择国籍 &ndash;</option>
            <option value="AL">阿拉伯</option>
            <option value="AK">中国</option>
            <option value="AZ">美国</option>
            <option value="AR">法国</option>
            <option value="CA">英国</option>
            <option value="CO">德国</option>
            <option value="CT">西班牙</option>
            <option value="DE">俄罗斯</option>
          </select>
        </div>
        <div><label>邮编:</label><input type="text" name="zip" data-ideal="zip"/></div>
        <div><label>备注:</label><textarea id="comments" name="comments"></textarea></div>
      </section>
      <div><hr/></div>
      <div>
        <button type="submit">提交</button>
        <button id="reset" type="button">重置</button>
      </div>
    </form>
    <!-- End Form -->
  </div>
</div>
<script type="text/javascript">
var options = {
	onFail: function(){
		alert( $myform.getInvalid().length +' invalid fields.' )
	},
	inputs: {
		'password': {
			filters: 'required pass',
		},
		'username': {
			filters: 'required username',
			data: {
			//ajax: { url:'validate.php' }
			}
		},
		'file': {
			filters: 'extension',
			data: { extension: ['jpg'] }
		},
		'comments': {
			filters: 'min max',
			data: { min: 50, max: 200 }
		},
		'states': {
			filters: 'exclude',
			data: { exclude: ['default'] },
			errors : {
				exclude: '选择国籍.'
			}
		},
		'langs[]': {
			filters: 'min max',
			data: { min: 2, max: 3 },
			errors: {
				min: 'Check at least <strong>2</strong> options.',
				max: 'No more than <strong>3</strong> options allowed.'
			}
		}
	}
};
var $myform = $('#my-form').idealforms(options).data('idealforms');
$('#reset').click(function(){
	$myform.reset().fresh().focusFirst()
});
$myform.focusFirst();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 头像上传 图片上传 选项卡自动切换 注册框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到