基于angularJS的表单验证指令

前端之家收集整理的这篇文章主要介绍了基于angularJS的表单验证指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁,于是写了个表单验证的框架,再也不用担心这个心烦的验证了。

这里使用angularJS的指令进行处理代码及其简洁明了

下面是指令JS代码

  1. app.directive('ccForm',['$parse',function ($parse) {
  2. return {
  3. restrict:'A',link:function (scope,element,attrs) {
  4. var first=true;
  5. var errors=0;
  6. function showError(input,errorIndex) {
  7. if(first){
  8. errors++;
  9. $parse(element.attr('cc-form')).assign(scope,false);
  10. refreshScope(scope);
  11. return;
  12. }
  13. input.addClass('hasError');
  14. input.closest('.form-group').addClass('hasError');
  15. input.next('.help-block').find('.cc-show').removeClass('cc-show');
  16. input.next('.help-block').find('[cc-error-'+errorIndex+']').addClass('cc-show');
  17. input.closest('.form-group').next('.help-block').find('.cc-show').removeClass('cc-show');
  18. input.closest('.form-group').next('.help-block').find('[cc-error-'+errorIndex+']').addClass('cc-show');
  19. }
  20. function hidError(input,errorIndex) {
  21. errors--;
  22. if(errors==0){
  23. $parse(element.attr('cc-form')).assign(scope,true);
  24. refreshScope(scope);
  25. }
  26. input.removeClass('hasError');
  27. input.closest('.form-group').removeClass('hasError');
  28. input.next('.help-block').find('[cc-error-'+errorIndex+']').removeClass('cc-show');
  29. input.closest('.form-group').next('.help-block').find('[cc-error-'+errorIndex+']').removeClass('cc-show');
  30. }
  31. function checkInput(input) {
  32. var that=$(input);
  33. var attrs=input.getAttributeNames();
  34. var value=that.val();
  35. for(var i=0,attr;attr=attrs[i];i++){
  36. var attrValue=that.attr(attr);
  37. if(attr=='cc-email'){
  38. if(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value)){
  39. hidError(that,attrValue)
  40. }else{
  41. showError(that,attrValue);
  42. break;
  43. }
  44. }else if(attr=='cc-phone'){
  45. if(/\d{11}/.test(value)){
  46. hidError(that,attrValue);
  47. }else {
  48. showError(that,attrValue);
  49. break;
  50. }
  51. }else if(attr=='cc-max'){
  52. if(value.length>attrValue){
  53. showError(that,that.attr(attr+'-error'));
  54. break;
  55. }else {
  56. hidError(that,that.attr(attr+'-error'));
  57. }
  58. }else if(attr=='cc-min'){
  59. if(value.length<attrValue){
  60. showError(that,that.attr(attr+'-error'));
  61. }
  62. }else if(attr=='cc-regex'){
  63. var patten=new RegExp(attrValue);
  64. if(patten.test(value)){
  65. hidError(that,that.attr(attr+'-error'));
  66. }else {
  67. showError(that,that.attr(attr+'-error'));
  68. break;
  69. }
  70. }else if(attr=='cc-require'){
  71. if(!value||value.trim()==''){
  72. showError(that,attrValue);
  73. break;
  74. }else {
  75. hidError(that,attrValue);
  76. }
  77. }
  78. }
  79. }
  80. function checkForm(form) {
  81. form.find('input,textarea').each(function () {
  82. checkInput(this);
  83. });
  84. }
  85. element.find('input,textarea').blur(function (e) {
  86. first=false;
  87. checkInput(this);
  88. });
  89. element.find('[cc-submit]').click(function (e) {
  90. first=false;
  91. checkForm(element);
  92. });
  93. //预检测时不显示错误提示
  94. checkForm(element);
  95. }
  96. }
  97. }]);

对应的需要一点点CSS代码,下面是用LESS写的
  1. .help-block {
  2. * {
  3. &:not(.cc-show) {
  4. display: none;
  5. }
  6. }
  7. }
对应的CSS就是
  1. .help-block *:not(.cc-show) {
  2. display: none;
  3. }

用法1
  1. <div>
  2. <h1>test</h1>
  3. <form cc-form="form1">
  4. <div class="from-group">
  5. <input type="password" ng-model="user.password" cc-max="16" cc-max-error="1" cc-min="6" cc-min-error="2">
  6. <div class="help-block">
  7. <p cc-error-1>密码长度不能超过16位</p>
  8. <p cc-error-2>密码最短为6</p>
  9. </div>
  10. </div>
  11. <div class="form-group">
  12. <input ng-model="user.phone" cc-regex="\d{11}" cc-regex-error="1">
  13. <div class="help-block">
  14. <p cc-error-1>请输入正确的手机号</p>
  15. </div>
  16. </div>
  17. <div class="form-group">
  18. <input ng-model="user.fax" cc-require="1">
  19. <div class="help-block">
  20. <p cc-error-1>请输入传真</p>
  21. </div>
  22. </div>
  23. <div class="form-group">
  24. <input ng-model="user.email" cc-email="1">
  25. <div class="help-block">
  26. <p cc-error-1>请输入正确的邮箱</p>
  27. </div>
  28. </div>
  29. <button type="button" cc-submit>提交</button>
  30. </form>
  31. </div>

用法2
  1. <form class="form shadow-Box" cc-form="form1">
  2. <h3>登录</h3>
  3. <div class="form-group">
  4. <div class="cellphone">
  5. <input placeholder="手机号" ng-model="user.loginName" name="loginName" cc-regex="\d{11}" cc-regex-error="1" cc-require="2"/>
  6. </div>
  7. </div>
  8. <div class="help-block">
  9. <p cc-error-1>请输入正确的手机号</p>
  10. <p cc-error-2>请输入手机号</p>
  11. </div>
  12. <div class="form-group">
  13. <div class="password">
  14. <input placeholder="密码" type="password" ng-model="user.password" name="password" cc-require="1"/>
  15. </div>
  16. </div>
  17. <div class="help-block">
  18. <p cc-error-1>请输入密码</p>
  19. </div>
  20. <div class="form-group">
  21. <div class="vcode">
  22. <input placeholder="验证码" ng-model="user.vcode" name="vcode" cc-require="1">
  23. <img src="">
  24. </div>
  25. </div>
  26. <div class="help-block">
  27. <p cc-error-1>请输入验证码</p>
  28. </div>
  29. <div class="checkBox">
  30. <label>
  31. <input type="checkBox" ng-model="user.rememberPass" ng-true-value="true" ng-false-value="false">自动登录
  32. </label>
  33. </div>
  34. <p class="to-register">没有账号?<a href="#/main/register">立即注册</a></p>
  35. <button type="button" ng-click="login(1)" cc-submit>登录</button>
  36. </form>

如此简洁明了

猜你在找的Angularjs相关文章