Hi Thirumaghal,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Visualforce:

<apex:page id="pg" controller="PhoneValidationC" >
    <apex:form id="fm">
        
        <script >
        function show()
        {
            var phn=document.getElementById("{!$Component.pg.fm.pgb.pbs.one}");
            var pattern=/^\d{10}$/;
            if(!pattern.test(phn.value))
            {
                alert("Please Provide Valid Number");
                phn.focus();
                return false;
            }  
            else{
                alert("Apex Method");
                CallApexMethod();
                return true;
            }
        }
        </script>
        
        <apex:actionFunction name="CallApexMethod" action="{!insertIt}" reRender="fm"/>
        <apex:pageBlock id="pgb" title="Account Phone Validation">
            <apex:pageBlockSection columns="1" id="pbs">
                <apex:inputField value="{!acc.Name}" />
                <apex:inputField value="{!acc.Phone}" id="one" />               
            </apex:pageBlockSection>
            <apex:pageBlockButtons location="Bottom">
                <apex:commandButton value="Validate" onclick="show();" />
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Controller:

public class PhoneValidationC {
    
    public Account acc {get;set;}
    
    public PhoneValidationC(){
        acc = new Account();
    }
    
    public pageReference insertIt(){
        System.debug('Apex Method');
        INSERT acc;   
        return null;
    }    
}

OR

Visualforce:

<apex:page controller="PhoneAccValC">
    <apex:messages/>
    <apex:form>
        <apex:pageblock>
            Phone:   <apex:inputText  value="{!phone}" />
            <br/><br/>
            <apex:commandButton value="Validate Phone" action="{!validate}" />
        </apex:pageblock>
    </apex:form>
</apex:page>

Controller:

public class PhoneAccValC {
    
    public String phone {get;set;}
    public List<Account> acc {get;set;}
    
    public PhoneAccValC() {
        acc = [SELECT Id, Name, Phone FROM Account LIMIT 1];
    }
    
    public PageReference validate() {
        if(phone.length() == 10) {
            acc[0].phone=phone;
            UPDATE acc[0];
        }
        else{
            ApexPages.Message msg = new ApexPages.Message(ApexPages.Severity.ERROR, 'Enter Valid Phone Number');
            ApexPages.addMessage(msg);
            return null;
        }
        return null;
    }
}

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas